Thin react wrapper around magic-grid usin hooks

Usage no npm install needed!

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


React Magic Grid

A react adapter for Magic Grid. Uses react hooks, so requires react at least in version 16.8.0.

There is another react adapter available that uses react's Component Class so it also supports older versions of react.

See example use cases.


npm i -S magic-grid react-magic-grid

import MagicGrid from "react-magic-grid"

const Cards = ({ cards }) => (
  <MagicGrid items={cards.length}>
    { => (
      <Card key={item} item={item} />


Supports all options in Magic-Grid's config.


Supports imperative repositioning through ref forwarding.

import MagicGrid from "react-magic-grid"

const ResizableComponent = ({ cards }) => {
  const gridRef = React.useRef()

  // Can use gridRef.current.positionItems() to reposition.

  return (
    <MagicGrid items={cards.length} ref={gridRef}>
      {/* card rendering code */}