Upgrade to Pro — share decks privately, control downloads, hide ads and more …

react-beautiful-dnd を使いたかった話

react-beautiful-dnd を使いたかった話

Eef36ddd9ee17bc2077ac2cf754e84e1?s=128

kobayang

June 26, 2018
Tweet

Transcript

  1. ©2018 Wantedly, Inc. react-beautiful-dnd Λ࢖͍͔ͨͬͨ࿩ Roppongi.js #4 25.June.2018 - Naoki

    Kobayashi
  2. ©2018 Wantedly, Inc. Naoki Kobayashi GitHub: @kobayang Twitter: @kbys_02 I’m

    an Engineer @Wantedly ৽ଔ1೥໨ Ruby / Rails / JS / TS / React
  3. ©2018 Wantedly, Inc. Motivation - ձࣾϖʔδͷϦχϡʔΞϧ - ΠϯϥΠϯฤू - ϝϯόʔϖʔδͷDnDฤू

    - ReactͰdndͷ࣮૷
  4. ©2018 Wantedly, Inc. What is react-beautiful-dnd?

  5. ©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
  6. ©2018 Wantedly, Inc.

  7. ©2018 Wantedly, Inc.

  8. ©2018 Wantedly, Inc.

  9. ©2018 Wantedly, Inc.

  10. ©2018 Wantedly, Inc. react-beautiful-dnd Λ࢖͑ͳ͔ͬͨΘ͚

  11. ©2018 Wantedly, Inc. Do not support horizontal lists with multiple

    rows https://github.com/atlassian/react-beautiful-dnd/issues/316
  12. ©2018 Wantedly, Inc. ғ·Εͨ෦෼͸ `flex-wrap: wrap` Ͱ ࣮૷͞Ε͍ͯΔ Do not

    support horizontal lists with multiple rows
  13. ©2018 Wantedly, Inc. ͜Εʹؾ෇͔ͣPR͕1ͭແବʹ

  14. ©2018 Wantedly, Inc. 1. react-beautiful-dndͷ֦ு͢Δ 2. ΑΓࣗ༝౓ͷߴ͍React DnDΛ࢖͏ 3. σβΠϯࣗମΛमਖ਼͢Δ

    ͱΓ͑Δಓ
  15. ©2018 Wantedly, Inc. 1. react-beautiful-dndͷ֦ு͢Δ 2. ΑΓࣗ༝౓ͷߴ͍React DnDΛ࢖͏ 3. σβΠϯࣗମΛमਖ਼͢Δ

    ͱͬͨಓ
  16. ©2018 Wantedly, Inc. React DnD DnD͸ࣗ༝౓͕ߴ͍൓໘ react-beautiful-dndͰఏڙ͞Ε͍ͯΔҎԼͷ΋ͷ͸ ࣗྗͰ࣮૷͢Δඞཁ͕͋ͬͨ - Animation

    - Mouse , keyboard and touch - Multi drag - Render props pattern
  17. ©2018 Wantedly, Inc.

  18. ©2018 Wantedly, Inc. ReactͰDnDΛ࢖͏͜ͱͰσʔλͱDnDϩδοΫΛ੾Γ཭͢͜ͱ͕Ͱ͖Δ ༏ΕͨϥΠϒϥϦΛ࢖͍ͨͯ͘΋ඞཁػೳΛຬ͍ͨͯ͠Δ͔ݕূ͢Δ͜ͱ͸େ੾ react-beautiful-dnd Λ࢖͍͔ͨͬͨ ·ͱΊ

  19. ©2018 Wantedly, Inc. Thank you