React Absolute Grid

Unmaintained:

This library is unmaintained and has not been tested to work with React 16+. We're looking for maintainers. If you're interested, file an issue.

Description:

An absolute layout grid with animations, filtering, zooming, and drag and drop support. Use your own component as the grid item. See the Demo.

Usage:

Install with npm install react-absolute-grid

import React from 'react';
import createAbsoluteGrid from './lib/AbsoluteGrid.jsx';

// This is the component that will display your data
import YourDisplayComponent from 'your-display-component';

 var sampleItems = [
  {key: 1, name: 'Test', sort: 0, filtered: 0},
  {key: 2, name: 'Test 1', sort: 1, filtered: 0},
];

// Pass your display component to create a new grid
const AbsoluteGrid = createAbsoluteGrid(YourDisplayComponent, {someProp: 'my component needs this'});
React.render(<AbsoluteGrid items={sampleItems} />, document.getElementById('Container'));

CreateAbsoluteGrid

createAbsoluteGrid(DisplayComponent, displayProps = {}, forceImpure = false)

• DisplayComponent: is a react component to display in your grid
• displayProps: optional : are properties you want passed down to the DisplayComponent such as event handlers.
• forceImpure: optional : not recommended Will make this function as an impure component, meaning it always renders.

Options (Properties)

Your Component

Your component will receive item, index and itemsLength as props, as well as anything you pass into the createAbsoluteGrid function. Here's the simplest possible example:

import React from 'react';

export default function SampleDisplay(props) {
    // Supposing your item shape is something like {name: 'foo'}
    const { item, index, itemsLength } = props;
    return <div>Item {index} of {itemsLength}: {item.name}</div>;
}

What Makes AbsoluteGrid Unique?

The idea behind AbsoluteGrid is high performance. This is achieved by using Translate3d to position each item in the layout. Items are never removed from the DOM, instead they are hidden. For best performance you should avoid re-arranging or removing items which you pass into AbsoluteGrid, instead you can use the filtered and sort properties to hide or sort an item. Those properties are customizable using the keyProp and filterProp properties. In addition, all data passed must be immutable so that we don't waste any renders.

Your Display Component props

Each Component is passed the following props, as well as anything passed into the second parameter of createAbsoluteGrid

ToDo:

• Tests
• Improve Drag & Drop browser support and reliability

Browser Compatibility

This component should work in all browsers that support CSS3 3D Transforms. If you need IE9 support you can modify it to use transform rather than transform3d. Pull requests welcome!

Drag and Drop only works on IE11+ due to lack of pointer events, although there is a workaround coming soon.

Migrating from 2.x

Instead of passing displayObject to the AbsoluteGrid component, pass the component directly into the composer function, createAbsoluteGrid which returns an AbsoluteGrid component. That's it!