Giter VIP home page Giter VIP logo

react-beautiful-dnd's Introduction

react beautiful dnd logo

react-beautiful-dnd (rbd)

Beautiful and accessible drag and drop for lists with React

CircleCI branch npm

quote application example

Play with this example if you want!

Core characteristics

  • Beautiful and natural movement of items ๐Ÿ’
  • Accessible: powerful keyboard and screen reader support โ™ฟ๏ธ
  • Extremely performant ๐Ÿš€
  • Clean and powerful api which is simple to get started with
  • Plays extremely well with standard browser interactions
  • Unopinionated styling
  • No creation of additional wrapper dom nodes - flexbox and focus management friendly!

Get started ๐Ÿ‘ฉโ€๐Ÿซ

We have created a free course on egghead.io ๐Ÿฅš to help you get started with react-beautiful-dnd as quickly as possible.

course-logo

Currently supported feature set โœ…

  • Vertical lists โ†•
  • Horizontal lists โ†”
  • Movement between lists (โ–ค โ†” โ–ค)
  • Virtual list support ๐Ÿ‘พ - unlocking 10,000 items @ 60fps
  • Combining items
  • Mouse ๐Ÿญ, keyboard ๐ŸŽนโ™ฟ๏ธ and touch ๐Ÿ‘‰๐Ÿ“ฑ (mobile, tablet and so on) support
  • Multi drag support
  • Incredible screen reader support โ™ฟ๏ธ - we provide an amazing experience for english screen readers out of the box ๐Ÿ“ฆ. We also provide complete customisation control and internationalisation support for those who need it ๐Ÿ’–
  • Conditional dragging and conditional dropping
  • Multiple independent lists on the one page
  • Flexible item sizes - the draggable items can have different heights (vertical lists) or widths (horizontal lists)
  • Add and remove items during a drag
  • Compatible with semantic <table> reordering - table pattern
  • Auto scrolling - automatically scroll containers and the window as required during a drag (even with keyboard ๐Ÿ”ฅ)
  • Custom drag handles - you can drag a whole item by just a part of it
  • Able to move the dragging item to another element while dragging (clone, portal) - Reparenting your <Draggable />
  • Create scripted drag and drop experiences ๐ŸŽฎ
  • Allows extensions to support for any input type you like ๐Ÿ•น
  • ๐ŸŒฒ Tree support through the @atlaskit/tree package
  • A <Droppable /> list can be a scroll container (without a scrollable parent) or be the child of a scroll container (that also does not have a scrollable parent)
  • Independent nested lists - a list can be a child of another list, but you cannot drag items from the parent list into a child list
  • Server side rendering (SSR) compatible - see resetServerContext()
  • Plays well with nested interactive elements by default

Motivation ๐Ÿค”

react-beautiful-dnd exists to create beautiful drag and drop for lists that anyone can use - even people who cannot see. For a good overview of the history and motivations of the project you can take a look at these external resources:

Not for everyone โœŒ๏ธ

There are a lot of libraries out there that allow for drag and drop interactions within React. Most notable of these is the amazing react-dnd. It does an incredible job at providing a great set of drag and drop primitives which work especially well with the wildly inconsistent html5 drag and drop feature. react-beautiful-dnd is a higher level abstraction specifically built for lists (vertical, horizontal, movement between lists, nested lists and so on). Within that subset of functionality react-beautiful-dnd offers a powerful, natural and beautiful drag and drop experience. However, it does not provide the breadth of functionality offered by react-dnd. So react-beautiful-dnd might not be for you depending on what your use case is.

Documentation ๐Ÿ“–

About ๐Ÿ‘‹

Sensors ๐Ÿ”‰

The ways in which somebody can start and control a drag

API ๐Ÿ‹๏ธโ€

diagram

Guides ๐Ÿ—บ

Patterns ๐Ÿ‘ทโ€

Support ๐Ÿ‘ฉโ€โš•๏ธ

Read this in other languages ๐ŸŒŽ

Author โœ๏ธ

Alex Reardon @alexandereardon

Collaborators ๐Ÿค

react-beautiful-dnd's People

Contributors

abeaudoin2013 avatar ajaymathur avatar alexreardon avatar aquibm avatar atuck avatar bengummer avatar blasz avatar colinrcummings avatar coorasse avatar danieldelcore avatar elamje avatar greenkeeper[bot] avatar homerchen19 avatar hql287 avatar jaredcrowe avatar kulakowka avatar li0liq avatar marshallofsound avatar niwsa avatar noviny avatar phrazzld avatar rajabellebon avatar rambabusaravanan avatar ravenally avatar romellogoodman avatar seancurtis avatar teleaziz avatar timhaywood avatar trysound avatar wuweiweiwu avatar

Stargazers

 avatar

Watchers

 avatar

Forkers

omni7642

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.