A React implementation of Muuri

Usage no npm install needed!

<script type="module">
  import reactMuuri from '';


react-muuri 0.3.0

A React implementation of Muuri

NPM JavaScript Style Guide


This React implementation is based upon the amazing work done by Haltu Oy and others over at


npm install --save react-muuri


Sample component:

import React, { Component } from 'react'
import MuuriGrid from 'react-muuri';
import './MuuriGrid.css'

class SampleComponent extends Component {
  constructor () {

    this.removeElement = this.removeElement.bind(this);

  componentDidMount () {
    this.grid = new MuuriGrid({
      node: this.gridElement,
      defaultOptions: {
        dragEnabled: true // See Muuri's documentation for other option overrides.

    // An example of how to use `getEvent()` to make `synchronize()` update the grid.

  componentWillUnmount () {
    this.grid.getMethod('destroy'); // Required: Destroy the grid when the component is unmounted.

  removeElement () {
    // An example of how to use `getMethod()` to remove an element from the grid.
    if (this.gridElement && this.gridElement.children.length) {
      this.grid.getMethod('remove', this.gridElement.children[0], {removeElements: true});

  render () {
    return (
        {/* Assign a ref to the grid container so the virtual DOM will ignore it for now (WIP). */}
        <div ref={gridElement => this.gridElement = gridElement}>
          {/* Required: `item` and `item-content` classNames */}
          <div className="item box1">
            <div className="item-content">
              Box 1
          <div className="item box2">
            <div className="item-content">
              Box 2
          onClick={() => this.removeElement()}
          Remove 1st Element

export default SampleComponent;

Sample CSS:

.item {
  color: white;
  cursor: pointer;
  height: 200px;
  margin: 20px;
  position: absolute; /* Required by Muuri */
  width: 200px;

.muuri-item-dragging {
  z-index: 3;   /* Required by Muuri */

.muuri-item-releasing {
  z-index: 2; /* Required by Muuri */

.muuri-item-hidden {
  z-index: 0; /* Required by Muuri */

.box1 {
  background-color: orange; /* Go */

.box2 {
  background-color: blue; /* Gators */

.button {
  background-color: gray;
  border: none;
  color: white;
  cursor: pointer;
  display: inline-block;
  font-size: 16px;
  margin: 20px;
  padding: 15px;
  text-align: center;
  text-decoration: none;
  width: 200px;

Grid Methods

You can use any of the available grid methods provided by Muuri. Pass the method name as a string and up to four parameters as outlined in the particular method's documentation:

this.grid.getMethod('methodName', param1, param2, param3, param4);

Grid Events

You can use any of the available grid events provided by Muuri. Pass the event name as a string, up to two parameters, and a callback as outlined in the particular event's documentation:

this.grid.getEvent('eventName', param1, param2, callback);

If a callback exists, the two parameters included will be passed to the callback as:

callback(param1, param2)

Item Methods

You can use any of the available item methods provided by Muuri. Note that this is part of implementing a custom layout algorithm, the use of which is described in the "Provide a function to use a custom layout algorithm" section of Muuri's documentation. Pass the method name as a string and the item as a string or node as outlined in the documentation:

this.grid.getItemMethod(method, item);

Running tests

To execute all unit tests:

npm test

To run the tests with coverage:

npm run test:coverage

To watch the testing directory and execute against any changes:

npm run test:watch


Copyright © 2018 Matt Tischler. Licensed under The MIT license.