react-grid-layout VS react-joyride

You can find additional information about the React-Grid-Layout in the repository and documentation.

react-grid-layout A draggable and resizable grid layout with responsive breakpoints, for React.

A lot of projects seem to like: https://github.com/react-grid-layout/react-grid-layout

I’ve done that before using react grid layout (https://github.com/react-grid-layout/react-grid-layout) to allow for moving and resizing components, and then a lot of custom code. Having a well thought architecture makes a lot of difference there.

3. React Grid Layout

React Grid Layout: quite easy to setup, and quite powerful also. But I wanted to be able to move items in a grid so that it takes the position of another item in the grid and the grid keeps the same shape at the end of the drag/drop action - the defauilt behavior of this lib being to "make space" for the dragged item and break the grid layout. After spending one hour on it, I still couldn't find the way to achieve my goal, I quit.

My point is that there are already many libraries out there. With styling, input events and so on. For example, I use Blueprintjs in many current projects, which provides a large set of widgets/components. One of these is a spreadsheet-like table component with sorting, editing, reordering and more. I also use react-grid-layout for card widgets that you can drag and resize and react-flip-toolkit for animation, among other things. There is a huge React ecosystem out there and duplicating all of that would take far, far too long.

https://github.com/STRML/react-grid-layout#usage

React Joyride is a JS library for creating guided walkthroughs in React apps. It provides a set of components for creating step-by-step guides that help users understand the features of an app.

NPM: https://www.npmjs.com/package/react-joyride

Website: https://react-joyride.com/

react-joyride Create guided tours in your apps.

1. React Joyride