/Magic-Grid-React

🧙‍♂️ :electric_plug: Responsive Magic Grid for React

Primary LanguageTypeScriptThe UnlicenseUnlicense

magic-grid-react

All Contributors

GitHub forks GitHub stars GitHub issues GitHub license

This is a React.js port of @e-oj's Magic Grid. Please check the /example folder for a example.

If you use images, make sure they have a set height, otherwise the grid will calculate weirdly.

There is also a React Hook version which requires at least react@16.8

Setup

Install the component

$ npm i magic-grid-react magic-grid
import MagicGrid from 'magic-grid-react'

<MagicGrid>
  {posts.map(post => (
    <Card
      style={{maxWidth: 200}}
      key={post.id}
      title={post.title}
      body={post.body}
    />
  ))}
</MagicGrid>

Props

Supports all optinons in Magic-Grid

Default Props:

Prop Default Comment
gutter 32 Gap between elements
maxCols 5 Max number of colums
useMin false Use min width of columns
animate false Animate item positioning

Contributors

Thanks goes to these wonderful people (emoji key):

Arek Mytych
Arek Mytych
💻 📖 🤔

This project follows the all-contributors specification. Contributions of any kind welcome!