Nuclear Powered Macros

    react-fluid-grid

    1.0.9 • Public • Published

    react-fluid-grid

    Responsive layout similar to pinterest. Items placed in columns according to their order and height.

    Live Demo

    Installation

    npm i --save react-fluid-grid
    

    Usage

    Simply put components under FluidGrid component.

    import React from 'react'
    import FluidGrid from 'react-fluid-grid'
    import ItemComponent from './path/to/ItemComponent'
     
    export default () => (
      <FluidGrid>
        <ItemComponent />
        <ItemComponent />
        <ItemComponent />
        <div>
          <h1>{'Any node'}</h1>
        </div>
      </FluidGrid>
    )

    Example with optional props:

    import React from 'react'
    import FluidGrid from 'react-fluid-grid'
    import ItemComponent from './path/to/ItemComponent'
    const styleStrategies = [
      { mediaQuery: '(max-width: 719.9px)', style: { numberOfColumns: 1, gutterHeight: 5, gutterWidth: 0 } },
      { mediaQuery: '(min-width: 720px) and (max-width: 1023.9px)', style: { numberOfColumns: 2, gutterHeight: 15, gutterWidth: 15 } },
      { mediaQuery: '(min-width: 1024px)', style: { numberOfColumns: 3, gutterHeight: 30, gutterWidth: 30 } }
    ]
    const transition = 'top 100ms ease-in-out, left 100ms ease-in-out'
     
    export default () => (
      <FluidGrid
        className='my-grid'
        itemClassName='my-grid-item'
        styleStrategies={styleStrategies}
        transition={transition}
      >
        <ItemComponent />
        <ItemComponent />
        <ItemComponent />
        <div>
          <h1>{'Any node'}</h1>
        </div>
      </FluidGrid>
    )

    Props

    className

    Optional. Class name that will be assigned to the grid's containing div element.

    itemClassName

    Optional. Class name that will be assigned to the grid items' containing div elements.

    styleStrategies

    Optional. An array of styleStrategies that allows to control number of columns and gutter sizes in a responsive way.

    Shape:

    styleStrategies: PropTypes.arrayOf(PropTypes.shape({
      mediaQuery: PropTypes.string.isRequired,
      style: PropTypes.shape({
        numberOfColumns: PropTypes.number.isRequired,
        gutterHeight: PropTypes.number.isRequired,
        gutterWidth: PropTypes.number.isRequired
      })
    }))

    mediaQuery

    A string containing media query. For example: (min-width: 720px) and (max-width: 1023.9px). style of the first matching mediaQuery is applied to the grid.

    style

    An object that defines grid style for a given media. Must have following attributes:

    • numberOfColumns: number
    • gutterHeight: number, gutter height in pixels
    • gutterWidth: number, gutter width in pixels

    transition

    Optional. css transition property value. Defaut: top 200ms ease-in-out, left 200ms ease-in-out.

    Maintainers

    AntonRublev360

    Install

    npm i react-fluid-grid

    DownloadsWeekly Downloads

    147

    Version

    1.0.9

    License

    MIT

    Unpacked Size

    56.4 kB

    Total Files

    5

    Last publish

    Collaborators

    • antonrublev