Need advice about which tool to choose?Ask the StackShare community!

react-beautiful-dnd

81
81
+ 1
0
React Canvas

11
46
+ 1
0
Add tool

react-beautiful-dnd vs React Canvas: What are the differences?

What is react-beautiful-dnd? Beautiful and accessible drag and drop for lists with React (by Atlassian). 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 vertical and horizontal lists. 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.

What is React Canvas? High performance canvas rendering for React components, developed by Flipboard. React Canvas adds the ability for React components to render to "canvas" rather than DOM. This project is a work-in-progress. Though much of the code is in production on flipboard.com, the React canvas bindings are relatively new and the API is subject to change.

react-beautiful-dnd and React Canvas can be categorized as "JavaScript Framework Components" tools.

react-beautiful-dnd and React Canvas are both open source tools. react-beautiful-dnd with 15.2K GitHub stars and 831 forks on GitHub appears to be more popular than React Canvas with 12K GitHub stars and 944 GitHub forks.

Get Advice from developers at your company using StackShare Enterprise. Sign up for StackShare Enterprise.
Learn More

What is react-beautiful-dnd?

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 vertical and horizontal lists. 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.

What is React Canvas?

React Canvas adds the ability for React components to render to "canvas" rather than DOM. This project is a work-in-progress. Though much of the code is in production on flipboard.com, the React canvas bindings are relatively new and the API is subject to change.

Need advice about which tool to choose?Ask the StackShare community!

Jobs that mention react-beautiful-dnd and React Canvas as a desired skillset
What companies use react-beautiful-dnd?
What companies use React Canvas?
See which teams inside your own company are using react-beautiful-dnd or React Canvas.
Sign up for StackShare EnterpriseLearn More

Sign up to get full access to all the companiesMake informed product decisions

What tools integrate with react-beautiful-dnd?
What tools integrate with React Canvas?
What are some alternatives to react-beautiful-dnd and React Canvas?
React Router
React Router is a complete routing solution designed specifically for React.js. It painlessly synchronizes the components of your application with the URL, with first-class support for nesting, transitions, and server side rendering.
styled-components
Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅
Storybook
It is an open source tool for developing UI components in isolation for React, Vue, and Angular. It makes building stunning UIs organized and efficient.
Ant Design
An enterprise-class UI design language and React-based implementation. Graceful UI components out of the box, base on React Component. A npm + webpack + babel + dora + dva development framework.
Angular CLI
A command-line interface tool that you use to initialize, develop, scaffold, and maintain Angular applications. You can use the tool directly in a command shell, or indirectly through an interactive UI such as Angular Console.
See all alternatives