โคNicely Presented Misnomer
    Wondering whatโ€™s next for npm?Check out our public roadmap! ยป

    @dajinchu/react-beautiful-dnd
    TypeScript icon, indicating that this package has built-in type declarations

    13.0.0ย โ€ขย Publicย โ€ขย Published

    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 ๐Ÿค

    Install

    npm i @dajinchu/react-beautiful-dnd

    DownloadsWeekly Downloads

    1

    Version

    13.0.0

    License

    Apache-2.0

    Unpacked Size

    1.39 MB

    Total Files

    240

    Last publish

    Collaborators

    • avatar