useGrid

import {useGrid} from 'muuri-react';

The useGrid hook allow you to know which MuuriComponent the Item is a child of. This hook is useful if you're working with multiple MuuriComponents. See more here.

Usage 📖

If you are using multiple MuuriComponent you can distinguish them by an id.

const App = () => {
  // Items.
  const todoItems = [<Item key="1" text="Shopping" />];
  const doneItems = [<Item key="2" text="Homework" />];

  return (
    <Main>
      {/* Items marked as 'todo'. */}
      <MuuriComponent id="TODO">{todoItems}</MuuriComponent>
      {/* Items marked as 'done'. */}
      <MuuriComponent id="DONE">{doneItems}</MuuriComponent>
    </Main>
  );
};

Using the useGrid hook you can get the id of the MuuriComponent of which the Item is a child.

const Item = ({text}) => {
  const {id} = useGrid();
  // Change the color based on the id.
  const color = id === 'TODO' ? 'blue' : 'green';

  return (
    <div className={`item color-${color}`}>
      <div className="item-content">{text}</div>
    </div>
  );
};

#Usage 📖

Usage 📖