reearth / react-align

An all-in-one alignment and drag 'n drop system for React

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" }}>
  {/* 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.

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