React Align

A highly customizable and powerful drag 'n drop align system for React.

- Build your own alignment grid as simple or complex as you need
- Toggleable editor mode
- Customizable features and styles to integrate into your app effectively
- Fully written in TypeScript

$3

Screen Shot 2021-06-24 at 18 19 33

$3

Screen Shot 2021-06-24 at 18 46 47

$3

``npm install react-align yarn add react-align`

`Basic use`

`tsx


  {/ element containing GridWrapper needs to set the width and height /}
      onMove={(id: string, destAreaId: string, destIndex: number, prevAreaId: string, prevIndex: number) => { / ... / }}
    onExtend={(id: string, extended: boolean) => { / ... / }}
    onAlignmentChange={(areaId: string, alignment: Alignment) => { / ... / }>
    
      
        
          ...your component

All props used in the example above are mandatory for full functionality.

To make sure the drag 'n drop works correctly all GridArea ids inside a GridWrapper must be unique. The drag n drop will recognize the GridAreas based on your own desired naming convention that makes sense with your layout.

There are many other fields for each component, so please take a look at the source code to better customize react-align to your needs and look at the example for a simple example.

Editor mode

Re:Align's editor mode is easily toggleable by passing an editing prop to the GridWrapper.

Screen Shot 2021-06-24 at 18 15 51

If you find any bugs or would like to suggest any changes feel free to open an issue!

Enjoy!

License

MIT License