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

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

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

kobayang

June 26, 2018
Tweet

More Decks by kobayang

Other Decks in Programming

Transcript

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

    View full-size slide

  2. ©2018 Wantedly, Inc.
    Naoki Kobayashi
    GitHub: @kobayang
    Twitter: @kbys_02
    I’m an Engineer @Wantedly
    ৽ଔ1೥໨
    Ruby / Rails / JS / TS / React

    View full-size slide

  3. ©2018 Wantedly, Inc.
    Motivation
    - ձࣾϖʔδͷϦχϡʔΞϧ
    - ΠϯϥΠϯฤू
    - ϝϯόʔϖʔδͷDnDฤू
    - ReactͰdndͷ࣮૷

    View full-size slide

  4. ©2018 Wantedly, Inc.
    What is react-beautiful-dnd?

    View full-size slide

  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

    View full-size slide

  6. ©2018 Wantedly, Inc.

    View full-size slide

  7. ©2018 Wantedly, Inc.

    View full-size slide

  8. ©2018 Wantedly, Inc.

    View full-size slide

  9. ©2018 Wantedly, Inc.

    View full-size slide

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

    View full-size slide

  11. ©2018 Wantedly, Inc.
    Do not support horizontal lists with multiple rows
    https://github.com/atlassian/react-beautiful-dnd/issues/316

    View full-size slide

  12. ©2018 Wantedly, Inc.
    ғ·Εͨ෦෼͸
    `flex-wrap: wrap` Ͱ
    ࣮૷͞Ε͍ͯΔ
    Do not support horizontal lists with multiple rows

    View full-size slide

  13. ©2018 Wantedly, Inc.
    ͜Εʹؾ෇͔ͣPR͕1ͭແବʹ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  16. ©2018 Wantedly, Inc.
    React DnD
    DnD͸ࣗ༝౓͕ߴ͍൓໘ react-beautiful-dndͰఏڙ͞Ε͍ͯΔҎԼͷ΋ͷ͸
    ࣗྗͰ࣮૷͢Δඞཁ͕͋ͬͨ
    - Animation
    - Mouse , keyboard and touch
    - Multi drag
    - Render props pattern

    View full-size slide

  17. ©2018 Wantedly, Inc.

    View full-size slide

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

    View full-size slide

  19. ©2018 Wantedly, Inc.
    Thank you

    View full-size slide