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
npm install react-align
yarn add react-align
<div style={{ width: "100vw", height: "100vh" }}>
{/* element containing GridWrapper needs to set the width and height */}
<GridWrapper
onMove={(id: string, destAreaId: string, destIndex: number, prevAreaId: string, prevIndex: number) => { /* ... */ }}
onExtend={(id: string, extended: boolean) => { /* ... */ }}
onAlignmentChange={(areaId: string, alignment: Alignment) => { /* ... */ }>
<GridSection>
<GridArea id="area1">
<GridItem id="1234" index={1}>
...your component
</GridItem>
</GridArea>
</GridSection>
</GridWrapper>
</div>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!