33

Magic-Grid-React, a ReactJS port of Magic Grid

 5 years ago
source link: https://www.tuicool.com/articles/hit/ZRJFnyj
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

magic-grid-react

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.

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 gap 32 Gap between elements maxCols 5 Max number of colums useMin false Use min width of columns animate false Animate item positioning

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK