Slide 1
Slide 1 text
©2018 Wantedly, Inc.
react-beautiful-dnd
Λ͍͔ͨͬͨ
Roppongi.js #4
25.June.2018 - Naoki Kobayashi
Slide 2
Slide 2 text
©2018 Wantedly, Inc.
Naoki Kobayashi
GitHub: @kobayang
Twitter: @kbys_02
I’m an Engineer @Wantedly
৽ଔ1
Ruby / Rails / JS / TS / React
Slide 3
Slide 3 text
©2018 Wantedly, Inc.
Motivation
- ձࣾϖʔδͷϦχϡʔΞϧ
- ΠϯϥΠϯฤू
- ϝϯόʔϖʔδͷDnDฤू
- ReactͰdndͷ࣮
Slide 4
Slide 4 text
©2018 Wantedly, Inc.
What is react-beautiful-dnd?
Slide 5
Slide 5 text
©2018 Wantedly, Inc.
react-beautiful-dnd
Beautiful, accessible drag and drop
for lists with React.js
- Data driven
- Vertical ÷ and Horizontal lists 㲗
- Animation
- Mouse , keyboard and touch
- Multi drag
- Render props pattern
Beautiful
Slide 6
Slide 6 text
©2018 Wantedly, Inc.
Slide 7
Slide 7 text
©2018 Wantedly, Inc.
Slide 8
Slide 8 text
©2018 Wantedly, Inc.
Slide 9
Slide 9 text
©2018 Wantedly, Inc.
Slide 10
Slide 10 text
©2018 Wantedly, Inc.
react-beautiful-dnd
Λ͑ͳ͔ͬͨΘ͚
Slide 11
Slide 11 text
©2018 Wantedly, Inc.
Do not support horizontal lists with multiple rows
https://github.com/atlassian/react-beautiful-dnd/issues/316
Slide 12
Slide 12 text
©2018 Wantedly, Inc.
ғ·Εͨ෦
`flex-wrap: wrap` Ͱ
࣮͞Ε͍ͯΔ
Do not support horizontal lists with multiple rows
Slide 13
Slide 13 text
©2018 Wantedly, Inc.
͜Εʹؾ͔ͣPR͕1ͭແବʹ
Slide 14
Slide 14 text
©2018 Wantedly, Inc.
1. react-beautiful-dndͷ֦ு͢Δ
2. ΑΓࣗ༝ͷߴ͍React DnDΛ͏
3. σβΠϯࣗମΛमਖ਼͢Δ
ͱΓ͑Δಓ
Slide 15
Slide 15 text
©2018 Wantedly, Inc.
1. react-beautiful-dndͷ֦ு͢Δ
2. ΑΓࣗ༝ͷߴ͍React DnDΛ͏
3. σβΠϯࣗମΛमਖ਼͢Δ
ͱͬͨಓ
Slide 16
Slide 16 text
©2018 Wantedly, Inc.
React DnD
DnDࣗ༝͕ߴ͍໘ react-beautiful-dndͰఏڙ͞Ε͍ͯΔҎԼͷͷ
ࣗྗͰ࣮͢Δඞཁ͕͋ͬͨ
- Animation
- Mouse , keyboard and touch
- Multi drag
- Render props pattern
Slide 17
Slide 17 text
©2018 Wantedly, Inc.
Slide 18
Slide 18 text
©2018 Wantedly, Inc.
ReactͰDnDΛ͏͜ͱͰσʔλͱDnDϩδοΫΛΓ͢͜ͱ͕Ͱ͖Δ
༏ΕͨϥΠϒϥϦΛ͍ͨͯ͘ඞཁػೳΛຬ͍ͨͯ͠Δ͔ݕূ͢Δ͜ͱେ
react-beautiful-dnd Λ͍͔ͨͬͨ
·ͱΊ
Slide 19
Slide 19 text
©2018 Wantedly, Inc.
Thank you