A highly customizable and powerful drag 'n drop align system for React.
npm install react-alignA 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


```
npm install react-align
yarn add react-align
`tsx``
{/ element containing GridWrapper needs to set the width and height /}
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.
Re:Align's editor mode is easily toggleable by passing an editing prop to the GridWrapper.

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