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
Drag 'n drop
Alignment
Getting started
npm install react-align
yarn add react-align
Basic use
<div style={{ width: "100vw", height: "100vh" }}>
{}
<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.
Editor mode
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!
License
MIT License