Muuri API

You can refer to the Muuri Github site for its documentation. Some methods that have been added or changed are reported here.

Grid methods ⚙️

Methods added or modified in the Muuri instance. See more here.

• getId
• getGroupIds
• getItem
• getItems
• move
• send

---

grid.getId()

Get the grid id.

Returns  —  string

<MuuriComponent id={'id'} />

const id = grid.getId();

---

grid.getGroupIds()

Get the grid group ids.

Returns  —  string[]

<MuuriComponent groupIds={['groupA', 'groupB']} />

const groupIds = grid.getGroupIds();

grid.getItem( target )

Get a single grid item by element or by index. Target can also be a Muuri.Item instance in which case the function returns the item if it exists within related Muuri instance. If nothing is found with the provided target, null is returned.

Parameters

• target  —  number / element / Muuri.Item

Returns  —  Muuri.Item / null

• Returns the queried item or null if no item is found.

<MuuriComponent>

<Item key={'key'} />

</MuuriComponent>

// Get the item instance associated with the <Item> in first position.

const item = grid.getItem(0);

// Get the item instance associated with the <Item> with the given key.

const item = grid.getItem('key');

grid.getItems( [targets] )

Get all items in the grid. Optionally you can provide specific targets (indices or elements).

Parameters

• targets  —  array / number / element / Muuri.Item
  • An array of item indices/elements/instances.
  • Optional.

Returns  —  array

• Returns the queried items.

<MuuriComponent>

<Item key={'key1'} />

<Item key={'key2'} />

</MuuriComponent>

// Get all items instances.

const allItems = grid.getItems();

// Get all active items instances associated with active <Item>s.

const activeItems = grid.getItems().filter((item) => item.isActive());

// Get the item instance associated with the <Item> in first position.

const firstItem = grid.getItems(0)[0];

grid.move( item, position, [options] )

Move an item to another position in the grid.

Parameters

• item  —  number / element / Muuri.Item
  • Item index, element or instance.
• position  —  number / element / Muuri.Item
  • Item index, element or instance.
• options.action  —  string
  • Accepts the following values:
    • 'move': moves item in place of another item.
    • 'swap': swaps position of items.
  • Default value: 'move'.
  • Optional.
• options.layout  —  boolean / function / string
  • By default grid.layout() is called at the end of this method. With this argument you can control the layout call. You can disable the layout completely with false, or provide a callback function for the layout method, or provide the string 'instant' to make the layout happen instantly without any animations.
  • Default value: true.
  • Optional.

Returns  —  Muuri

• Returns the grid instance.

<MuuriComponent>

<Item key={'key1'} />

<Item key={'key2'} />

</MuuriComponent>

// Move the first Item in the grid as the last.

grid.move(0, -1);

// Swap positions of the first and the last Item.

grid.move(0, -1, {action: 'swap'});

grid.send( item, grid, position, [options] )

Move an item into another grid. See more here.

Parameters

• item  —  number / element / Muuri.Item
  • The item that should be moved. You can define the item with an item index, element or instance.
• grid  —  Muuri
  • The grid where the item should be moved to.
• position  —  number / element / Muuri.Item
  • To which position should the item be placed to in the new grid? You can define the position with an item index, element or instance.
• options.appendTo  —  element
  • Which element the item element should be appended to for the duration of the layout animation?
  • Default value: document.body.
• options.layoutSender  —  boolean / function / string
  • By default grid.layout() is called for the sending grid at the end of this method. With this argument you can control the layout call. You can disable the layout completely with false, or provide a callback function for the layout method, or provide the string 'instant' to make the layout happen instantly without any animations.
  • Default value: true.
  • Optional.
• options.layoutReceiver  —  boolean / function / string
  • By default grid.layout() is called for the receiving grid at the end of this method. With this argument you can control the layout call. You can disable the layout completely with false, or provide a callback function for the layout method, or provide the string 'instant' to make the layout happen instantly without any animations.
  • Default value: true.
  • Optional.

Returns  —  Muuri

• Returns the grid instance.

// Grid A

<MuuriComponent>

<Item key={"key1"} />

</MuuriComponent>

// Grid B

<MuuriComponent>

<Item key={"key2"} />

</MuuriComponent>

// Move the first Item of gridA as the last Item of gridB.

gridA.send(0, gridB, -1);

Item methods ⚙️

Methods added or modified in the item instance. See more here.

• getKey
• getProps
• getData
• getGrid
• getElement

---

item.getKey()

Get the key of the item.

Returns  —  React.Key

const key = item.getKey();

item.getProps()

Get the props of the item.

Returns  —  object

const props = item.getProps();

item.getData()

Get the data of the item. See more here.

Returns  —  object

const data = item.getData();

item.getGrid()

Get the grid instance the item belongs to.

Returns  —  Muuri

const grid = item.getGrid();

item.getElement()

Get the item element.

Returns  —  element

const elem = item.getElement();

Muuri Map methods ⚙️

You can use the muuriMap to access all the Muuri instances of the MuuriComponents via ids and groupIds. See more here.

• get
• getGroup

---

muuriMap.get( id )

Get the Muuri instance associated with the MuuriComponent with the given id.

Parameters

• id  —  string

Returns  —  Muuri

• Returns the Muuri instance.

<MuuriComponent id={'id'} />

// The Muuri instance belonging to the

// MuuriComponenent with the id: "id".

const grid = muuriMap.get('id');

muuriMap.getGroup( groupId )

Get all the Muuri instances associated with MuuriComponents of the given group.

Parameters

• groupId  —  string

Returns  —  Muuri[]

• Returns the Muuri instances.

<MuuriComponent groupIds={["groupId"]} />

<MuuriComponent groupIds={["groupId"]} />

// All the Muuri instances belonging to the

// MuuriComponenents of the group: "groupId".

const grids = muuriMap.getGroup('groupId');

muuriMap.getGroup( groupId )

Get all the Muuri instances associated with MuuriComponents of the given group.

Returns  —  Muuri[]

• Returns all the Muuri instances.

// All the Muuri instances.

const grids = muuriMap.getAll();