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.9k
Apollo Client Cache
kobayang
0
1.1k
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
バッチを作らなきゃとなったときに考えること
irof
2
550
ファインディLT_ポケモン対戦の定量的分析
fufufukakaka
0
950
オレを救った Cline を紹介する
codehex
13
12k
⚪⚪の⚪⚪をSwiftUIで再現す る
u503
0
100
Honoをフロントエンドで使う 3つのやり方
yusukebe
7
3.6k
color-scheme: light dark; を完全に理解する
uhyo
7
500
TCAを用いたAmebaのリアーキテクチャ
dazy
0
220
CDKを使ったPagerDuty連携インフラのテンプレート化
shibuya_shogo
0
120
From the Wild into the Clouds - Laravel Meetup Talk
neverything
0
180
データベースのオペレーターであるCloudNativePGがStatefulSetを使わない理由に迫る
nnaka2992
0
250
もう少しテストを書きたいんじゃ〜 #phpstudy
o0h
PRO
20
4.3k
Amazon Bedrockマルチエージェントコラボレーションを諦めてLangGraphに入門してみた
akihisaikeda
1
150
Featured
See All Featured
Producing Creativity
orderedlist
PRO
344
40k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
Thoughts on Productivity
jonyablonski
69
4.5k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.5k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
13
1k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.3k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3k
The Pragmatic Product Professional
lauravandoore
32
6.4k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
21
2.5k
Practical Orchestrator
shlominoach
186
10k
Adopting Sorbet at Scale
ufuk
75
9.2k
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