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.9k
react-beautiful-dnd を使いたかった話
kobayang
June 26, 2018
Tweet
Share
More Decks by kobayang
See All by kobayang
React Suspenseを使って遷移体験を向上させる
kobayang
4
1.9k
Apollo Client Cache
kobayang
0
1.2k
React Hooks を安全に使う
kobayang
2
1.3k
Puppeteerを導入してみた話
kobayang
2
150k
ゼロから学ぶWeb Authentication API
kobayang
0
1.2k
Other Decks in Programming
See All in Programming
アセットのコンパイルについて
ojun9
0
130
HTMLの品質ってなんだっけ? “HTMLクライテリア”の設計と実践
unachang113
4
2.9k
Zendeskのチケットを Amazon Bedrockで 解析した
ryokosuge
3
310
テストカバレッジ100%を10年続けて得られた学びと品質
mottyzzz
2
600
CJK and Unicode From a PHP Committer
youkidearitai
PRO
0
110
さようなら Date。 ようこそTemporal! 3年間先行利用して得られた知見の共有
8beeeaaat
3
1.5k
Reading Rails 1.0 Source Code
okuramasafumi
0
230
FindyにおけるTakumi活用と脆弱性管理のこれから
rvirus0817
0
520
詳解!defer panic recover のしくみ / Understanding defer, panic, and recover
convto
0
240
アプリの "かわいい" を支えるアニメーションツールRiveについて
uetyo
0
270
GitHubとGitLabとAWS CodePipelineでCI/CDを組み比べてみた
satoshi256kbyte
4
240
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
380
Featured
See All Featured
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
The Language of Interfaces
destraynor
161
25k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.2k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
4 Signs Your Business is Dying
shpigford
184
22k
Become a Pro
speakerdeck
PRO
29
5.5k
Music & Morning Musume
bryan
46
6.8k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
30
9.7k
Building Applications with DynamoDB
mza
96
6.6k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
GitHub's CSS Performance
jonrohan
1032
460k
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