react-magic-grid

Thin react wrapper around magic-grid usin hooks

Usage no npm install needed!

<script type="module">
  import reactMagicGrid from 'https://cdn.skypack.dev/react-magic-grid';
</script>

README

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.

Usage

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

import MagicGrid from "react-magic-grid"

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

Props

Supports all options in Magic-Grid's config.

Repositioning

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 */}
    </MagicGrid>
  )
}