React-align NPM

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.