react-motion-grid

Installing

$ npm install react-motion-grid --save

Demos

Usage

<MotionGrid
  columns={[
    6, 6
    4, 4, 4
    3, 3, 3, 3
    6, 6,
  ]}
  innerPadding={{
    vertical: 10,
    horizontal: 10,
  }}
>
  {range(20).map(renderItem)}
</MotionGrid>

Property	Type	Default	Description
children*	arrayOf (element)		Array of react elements you want to render in a grid.
columns	union ( number, arrayOf (number) )	12	This controls number of columns to render for each row.

This MUST be between 1 and 12
e.g. 12 / 3 -> This will render 3 columns in each row.
e.g. [ 6, 6, 4, 4, 4 ] -> This will render 5 items in two rows, first
row will render two items (6, 6), second row will render three items
(4, 4, 4). | | innerPadding | union (
number,
string,
shape {
vertical: union
horizontal: union
}
) | 0 | Inner paddings between items. You can have different vertical and horizontal
paddings. | | startAnimate | bool | true | If you want to control when the animation should start then set this to
false. | | animationType | enum ('bottomFadeIn', 'fadeIn') | 'fadeIn' | Animation type to use. | | disableAnimation | bool | | This will disable the animation. | | enablePaging | bool | false | Enable paging feature. | | pagingOptions | shape {
isFetchedAll: bool
isLoading: bool
loadMoreItems: func
} | {} | This is only considered when enablePaging is true. | | springOptions | shape {
stiffness: number
damping: number
} | presets.noWobble | React motion configurations.
More about this here | | enablePlaceholders | bool | false | Whether or not to enable placeholders. | | placeholderRows | number | 3 | Number of placeholder rows to show before data is loaded | | placeholderItem | element | | React element to render for the placeholder | | minimumPlaceholdersTime | number | 0 | Minimum millis to wait before hiding placeholder even if the data was loaded.
This is used to pervent flickers when the data is loaded in a very short time |

Contributing

To contribute, follow these steps:

Fork this repo.
Clone your fork.
Run npm install
Run npm start
Goto localhost:3000
Add your patch then push to your fork and submit a pull request

License

MIT