use-pulled-grid

A React hook provides responsive CSS Grid container

• [x] Calculate CSS properties for grid container to fit the current window width
• [ ] Get easier to use animated-css-grid

Live demo

See in CodeSandbox

Usage

Inline style

import React from 'react'

import usePulledGrid from 'use-pulled-grid'

const ProductCardList = ({ products }) => {
  const { styles } = usePulledGrid({
    columnMinWidth: 100, // Each grid items never get smaller than 100px
    gridGap: 10,
  })

  return (
    <div style={styles.container}>
      {products.map(product => (
        {/* Wrappers to each child are required for css-animated-grid and fallback style of grid gap */}
        <div key={product.id} style={styles.itemWrapper}>
            <ProductCard {...product}/>
        </div>
      )}
    </div>
  )
}

styled-components

import React from 'react'
import styled from 'styled-components'

import usePulledGrid from 'use-pulled-grid'

const ProductCardList = ({ products }) => {
  const { styles } = usePulledGrid({
    columnMinWidth: 100,
    gridGap: 10,
  })

  const Container = React.useMemo(() => (
    styled.div(styles.container)
  ), [styles.container])

  const ItemWrapper = React.useMemo(() => (
    styled.div(styles.itemWrapper)
  ), [styles.itemWrapper])

  return (
    <Container>
      {products.map(product => (
        <ItemWrapper key={product.id}>
          <ProductCard {...product}/>
        </ItemWrapper>
      )}
    </Container>
  )
}

Changelog

v1.1.0

• Cleanup codes
• Make test coverage 100%

License

MIT