Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
react-beautiful-dnd を使いたかった話
kobayang
June 26, 2018
Programming
2
1.4k
react-beautiful-dnd を使いたかった話
kobayang
June 26, 2018
Tweet
Share
More Decks by kobayang
See All by kobayang
Apollo Client Cache
kobayang
0
630
React Hooks を安全に使う
kobayang
2
990
Puppeteerを導入してみた話
kobayang
2
81k
ゼロから学ぶWeb Authentication API
kobayang
0
810
Other Decks in Programming
See All in Programming
段階的な技術的負債の解消方法.pdf
ko2ic
2
950
アジャイルで始める データ分析基盤構築
nagano
1
920
FutureCon 2022 FlutterアプリのPerformance測定
harukafujita
0
140
Automating Gradle benchmarks at N26
ubiratansoares
PRO
2
150
SGGとは
inoue2002
0
440
Babylon.jsで作ったsceneをレイトレーシングで映えさせる
turamy
1
210
モデルの定義に基づくバリデーションを実現するためのpydantic入門
daikikatsuragawa
0
120
夕食断食にTRY!/for-lt-12th
pachikuriii
0
250
2022年のモダンCSS改
tonkotsuboy_com
24
17k
Amazon Lookout for Visionで 筆跡鑑定してみた
cmnakamurashogo
0
180
パスワードに関する最近の動向
kenchan0130
1
330
kintoneでランダム取得を作ってみた(imoniCamp 2022-07-27)
shokun1108
0
150
Featured
See All Featured
A better future with KSS
kneath
226
16k
Facilitating Awesome Meetings
lara
29
4.1k
4 Signs Your Business is Dying
shpigford
169
20k
Statistics for Hackers
jakevdp
782
210k
Faster Mobile Websites
deanohume
294
29k
Fireside Chat
paigeccino
13
1.4k
Web Components: a chance to create the future
zenorocha
303
40k
Agile that works and the tools we love
rasmusluckow
319
19k
Designing Experiences People Love
moore
130
22k
10 Git Anti Patterns You Should be Aware of
lemiorhan
638
52k
The Power of CSS Pseudo Elements
geoffreycrofte
47
4k
Mobile First: as difficult as doing things right
swwweet
213
7.6k
Transcript
©2018 Wantedly, Inc. react-beautiful-dnd Λ͍͔ͨͬͨ Roppongi.js #4 25.June.2018 - Naoki
Kobayashi
©2018 Wantedly, Inc. Naoki Kobayashi GitHub: @kobayang Twitter: @kbys_02 I’m
an Engineer @Wantedly ৽ଔ1 Ruby / Rails / JS / TS / React
©2018 Wantedly, Inc. Motivation - ձࣾϖʔδͷϦχϡʔΞϧ - ΠϯϥΠϯฤू - ϝϯόʔϖʔδͷDnDฤू
- ReactͰdndͷ࣮
©2018 Wantedly, Inc. What is react-beautiful-dnd?
©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
©2018 Wantedly, Inc.
©2018 Wantedly, Inc.
©2018 Wantedly, Inc.
©2018 Wantedly, Inc.
©2018 Wantedly, Inc. react-beautiful-dnd Λ͑ͳ͔ͬͨΘ͚
©2018 Wantedly, Inc. Do not support horizontal lists with multiple
rows https://github.com/atlassian/react-beautiful-dnd/issues/316
©2018 Wantedly, Inc. ғ·Εͨ෦ `flex-wrap: wrap` Ͱ ࣮͞Ε͍ͯΔ Do not
support horizontal lists with multiple rows
©2018 Wantedly, Inc. ͜Εʹؾ͔ͣPR͕1ͭແବʹ
©2018 Wantedly, Inc. 1. react-beautiful-dndͷ֦ு͢Δ 2. ΑΓࣗ༝ͷߴ͍React DnDΛ͏ 3. σβΠϯࣗମΛमਖ਼͢Δ
ͱΓ͑Δಓ
©2018 Wantedly, Inc. 1. react-beautiful-dndͷ֦ு͢Δ 2. ΑΓࣗ༝ͷߴ͍React DnDΛ͏ 3. σβΠϯࣗମΛमਖ਼͢Δ
ͱͬͨಓ
©2018 Wantedly, Inc. React DnD DnDࣗ༝͕ߴ͍໘ react-beautiful-dndͰఏڙ͞Ε͍ͯΔҎԼͷͷ ࣗྗͰ࣮͢Δඞཁ͕͋ͬͨ - Animation
- Mouse , keyboard and touch - Multi drag - Render props pattern
©2018 Wantedly, Inc.
©2018 Wantedly, Inc. ReactͰDnDΛ͏͜ͱͰσʔλͱDnDϩδοΫΛΓ͢͜ͱ͕Ͱ͖Δ ༏ΕͨϥΠϒϥϦΛ͍ͨͯ͘ඞཁػೳΛຬ͍ͨͯ͠Δ͔ݕূ͢Δ͜ͱେ react-beautiful-dnd Λ͍͔ͨͬͨ ·ͱΊ
©2018 Wantedly, Inc. Thank you