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.7k
Apollo Client Cache
kobayang
0
1k
React Hooks を安全に使う
kobayang
2
1.2k
Puppeteerを導入してみた話
kobayang
2
140k
ゼロから学ぶWeb Authentication API
kobayang
0
1.1k
Other Decks in Programming
See All in Programming
XStateでReactに秩序を与えたい
gizm000
0
720
マルチモジュールにおけるテスト最適化
fxwx23
0
200
connect-go で面倒くささと戦う / 2024-08-27 #newmo_layerx_go
izumin5210
2
640
React + TextAliveでカッコいいLyric Applicatioinを作ろう!!
tosuri13
0
400
LangGraphでのHuman-in-the-Loopの実装
os1ma
3
1.1k
Scala アプリケーションのビルドを改善してデプロイ時間を 1/4 にした話 | How I improved the build of my Scala application and reduced deployment time by 4x
nomadblacky
1
180
Boost Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
430
Architecture Decision Record (ADR)
nearme_tech
PRO
1
680
Developer Joy == Developer Productivity (really!)
hollycummins
1
140
Amebaチョイス立ち上げの裏側 ~依存システムとの闘い~
daichi_igarashi
0
230
Google Sign-inの移行から始めるCredential Manager活用
clockvoid
0
200
開発を加速する共有Swift Package実践
elmetal
PRO
0
400
Featured
See All Featured
The Art of Programming - Codeland 2020
erikaheidi
48
13k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3.4k
What's new in Ruby 2.0
geeforr
340
31k
Music & Morning Musume
bryan
46
6k
How to train your dragon (web standard)
notwaldorf
85
5.6k
Adopting Sorbet at Scale
ufuk
73
8.9k
Designing on Purpose - Digital PM Summit 2013
jponch
114
6.8k
10 Git Anti Patterns You Should be Aware of
lemiorhan
653
58k
Fashionably flexible responsive web design (full day workshop)
malarkey
401
65k
Fireside Chat
paigeccino
31
2.9k
Building Adaptive Systems
keathley
36
2.1k
A better future with KSS
kneath
235
17k
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