Hooks API

The custom hooks provided by this package are designed to be used inside the items.

import { <hookName> } from "muuri-react";

useData( [data], [options] ) 🔌

Parameters

• data  —  object
  • The data of the Item in which the hook is called.
  • Optional.
• options.merge  —  boolean
  • Should new data be merged with old ones or replace them?
  • Default value: false.
  • Optional.

Returns  —  setData( data, [options] )

setData( data, [options] )

Function returned by the hook. The identity of the function is guaranteed to be stable so it will be safe to omit them as a dependency (e.g. if it was used inside a useEffect hook).

Parameters

• data  —  object
  • The data of the Item in which the hook is called.
• options.merge  —  boolean
  • Should new data be merged with old ones or replace them?
  • Default value: false.
  • Optional.

Default options

Default options used by setData, useData.

useData.defaultOptions = {merge: false};

useDrag( ) 🔌

The Item will re-render on each drag start/end.

Returns  —  boolean

useDraggable( ) 🔌

Return the drag enabler method.

Returns  —  setDraggable( )

setDraggable( draggable )

Function returned by the hook. The identity of the function is guaranteed to be stable so it will be safe to omit them as a dependency (e.g. if it was used inside a useEffect hook).

Parameters

• draggable  —  boolean
  • A truthy value to allow the Item to be dragged, a falsy value to not allow the Item to be dragged.

useGrid( ) 🔌

Returns  —  GridData

• GridData.id  —  string
  • The id of the MuuriComponent of which the Item is a child.
• GridData.groupIds  —  array
  • The group ids of the MuuriComponent of which the Item is a child.
• GridData.grid  —  Muuri
  • The Muuri instance of the MuuriComponent of which the Item is a child.

useRefresh( [deps] ) 🔌

Show the targeted Items.

Parameters

• deps  —  array
  • An array of dependencies, it has the same purpose as in useEffect.
  • Default value: [].
  • Optional.

Returns  —  refresh( )

refresh( )

Function returned by the hook. The identity of the function is guaranteed to be stable so it will be safe to omit them as a dependency (e.g. if it was used inside a useEffect hook).

useShow( ) 🔌

The Item will re-render each time its visibility change.

Returns  —  boolean

useVisibility( ) 🔌

Return the visibility setter method.

Returns  —  setVisibility( )

setVisibility( visibility, [options] )

Function returned by the hook. The identity of the function is guaranteed to be stable so it will be safe to omit them as a dependency (e.g. if it was used inside a useEffect hook).

Parameters

• visibility  —  boolean

  • A truthy value to show the Item, a falsy value to hide the Item.

• options.instant  —  boolean

  • Should the animation happen instantly?
  • Default value: false.
  • Optional.

Default options

Default options used by setVisibility.

useData.defaultOptions = {instant: false};