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
140k
ゼロから学ぶWeb Authentication API
kobayang
0
1.1k
Other Decks in Programming
See All in Programming
Prompt Engineering for Developers @ AWS Community Day Adria 2024
slobodan
0
110
ピラミッド、アイスクリームコーン、SMURF: 自動テストの最適バランスを求めて / Pyramid Ice-Cream-Cone and SMURF
twada
PRO
6
200
EventSourcingの理想と現実
wenas
5
1.9k
go.mod、DockerfileやCI設定に分散しがちなGoのバージョンをまとめて管理する / Go Connect #3
arthur1
10
2.2k
Modern Angular: Renovation for Your Applications
manfredsteyer
PRO
0
130
rtcamp 10 (vk-illuminati)
yumcyawiz
1
220
カスタムしながら理解するGraphQL Connection
yanagii
0
610
Identifying User Idenity
moro
4
5.1k
The future of development – Are our jobs getting harder or easier?
hollycummins
1
240
CSC509 Lecture 06
javiergs
PRO
0
140
現場で役立つモデリング 超入門
masuda220
PRO
10
2.2k
リリース8年目のサービスの1800個のERBファイルをViewComponentに移行した方法とその結果
katty0324
2
2.6k
Featured
See All Featured
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
106
49k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Why You Should Never Use an ORM
jnunemaker
PRO
53
9k
Measuring & Analyzing Core Web Vitals
bluesmoon
0
27
How To Stay Up To Date on Web Technology
chriscoyier
788
250k
The Cult of Friendly URLs
andyhume
78
6k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
225
22k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.6k
A better future with KSS
kneath
237
17k
How GitHub (no longer) Works
holman
311
140k
Agile that works and the tools we love
rasmusluckow
327
21k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
43
6.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