Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
react-beautiful-dnd を使いたかった話
Search
kobayang
June 26, 2018
Programming
2
1.8k
react-beautiful-dnd を使いたかった話
kobayang
June 26, 2018
Tweet
Share
More Decks by kobayang
See All by kobayang
React Suspenseを使って遷移体験を向上させる
kobayang
4
1.8k
Apollo Client Cache
kobayang
0
1.1k
React Hooks を安全に使う
kobayang
2
1.3k
Puppeteerを導入してみた話
kobayang
2
150k
ゼロから学ぶWeb Authentication API
kobayang
0
1.1k
Other Decks in Programming
See All in Programming
Refactor your code - refactor yourself
xosofox
1
260
今年のアップデートで振り返るCDKセキュリティのシフトレフト/2024-cdk-security-shift-left
tomoki10
0
200
[JAWS-UG横浜 #76] イケてるアップデートを宇宙いち早く紹介するよ!
maroon1st
0
460
Semantic Kernelのネイティブプラグインで知識拡張をしてみる
tomokusaba
0
180
php-conference-japan-2024
tasuku43
0
280
Итераторы в Go 1.23: зачем они нужны, как использовать, и насколько они быстрые?
lamodatech
0
770
なまけものオバケたち -PHP 8.4 に入った新機能の紹介-
tanakahisateru
1
120
ゆるやかにgolangci-lintのルールを強くする / Kyoto.go #56
utgwkk
2
380
tidymodelsによるtidyな生存時間解析 / Japan.R2024
dropout009
1
770
42 best practices for Symfony, a decade later
tucksaun
1
180
rails stats で紐解く ANDPAD のイマを支える技術たち
andpad
1
290
Асинхронность неизбежна: как мы проектировали сервис уведомлений
lamodatech
0
770
Featured
See All Featured
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
A Tale of Four Properties
chriscoyier
157
23k
Gamification - CAS2011
davidbonilla
80
5.1k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
132
33k
Practical Orchestrator
shlominoach
186
10k
How to Think Like a Performance Engineer
csswizardry
22
1.2k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
2
170
Site-Speed That Sticks
csswizardry
2
190
Speed Design
sergeychernyshev
25
670
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
26
1.9k
Automating Front-end Workflow
addyosmani
1366
200k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
169
50k
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