https://github.com/cometkim/use-pulled-grid
A React hook provides responsive grid container style
https://github.com/cometkim/use-pulled-grid
css-in-js react react-hooks
Last synced: 3 months ago
JSON representation
A React hook provides responsive grid container style
- Host: GitHub
- URL: https://github.com/cometkim/use-pulled-grid
- Owner: cometkim
- License: mit
- Created: 2019-03-06T15:57:15.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2023-12-15T14:36:06.000Z (about 2 years ago)
- Last Synced: 2024-10-29T14:39:10.851Z (about 1 year ago)
- Topics: css-in-js, react, react-hooks
- Language: TypeScript
- Size: 829 KB
- Stars: 5
- Watchers: 3
- Forks: 0
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-list - use-pulled-grid
README
# use-pulled-grid
[](https://www.npmjs.com/package/use-pulled-grid)
[](https://circleci.com/gh/cometkim/use-pulled-grid)
[](https://codecov.io/gh/cometkim/use-pulled-grid)
[](https://github.com/cometkim/use-pulled-grid/blob/master/LICENSE)
:warning: Wait, you don't need JS here! you can do this using **only CSS**
```css
grid-template-columns: repeat(auto-fit, minmax(--min-width, 1fr));
```
Use this code only when you need fallback styles.
----
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](https://github.com/aholachek/animate-css-grid)
## Live demo
See in [CodeSandbox](https://codesandbox.io/s/use-pulled-grid-example-41fh0?file=/src/index.js)
## Usage
### Inline style
```jsx
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 (
{products.map(product => (
{/* Wrappers to each child are required for css-animated-grid and fallback style of grid gap */}
)}
)
}
```
### emotion
```jsx
/* @jsx jsx */
import React from 'react'
import { css, jsx } from '@emotion/core'
import usePulledGrid from 'use-pulled-grid'
const ProductCardList = ({ products }) => {
const { styles } = usePulledGrid({
columnMinWidth: 100,
gridGap: 10,
})
const containerCss = React.useMemo(() => (
css(styles.container)
), [styles.container])
const itemWrapperCss = React.useMemo(() => (
css(styles.itemWrapper)
), [styles.itemWrapper])
return (
{products.map(product => (
)}
)
}
```
## Changelog
### v1.1.0
- Cleanup codes
- Make test coverage 100%
## License
MIT