React-motion-grid NPM

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: unionhorizontal: 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: boolisLoading: boolloadMoreItems: func} | {} | This is only considered when enablePaging is true. | | springOptions | shape {stiffness: numberdamping: 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 |