Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/andria-dev/react-spring-grid
An animated <Grid> component built using absolute positioning and react-spring
https://github.com/andria-dev/react-spring-grid
Last synced: 23 days ago
JSON representation
An animated <Grid> component built using absolute positioning and react-spring
- Host: GitHub
- URL: https://github.com/andria-dev/react-spring-grid
- Owner: andria-dev
- License: mit
- Created: 2019-05-14T14:22:41.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2019-06-16T07:00:15.000Z (over 5 years ago)
- Last Synced: 2024-05-02T04:50:29.877Z (8 months ago)
- Language: TypeScript
- Homepage: https://codesandbox.io/s/trusting-goodall-cltwy?fontsize=14
- Size: 447 KB
- Stars: 2
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 🎉 react-spring-grid 🎉
An animated `` component built using absolute positioning and [`react-spring`](https://npm.im/react-spring). This project was also built using TypeScript so that you can safely use this component in any TypeScript project of your own.
## Usage
### Installation
To install `react-spring-grid` you will need to install this package, as well as, `react` and `react-spring`.
```bash
pnpm i react react-spring react-spring-grid# or
yarn add react react-spring react-spring-grid
```### Example
To utilize the `` component you need at least 3 of the 6 following things:
\* means required
- **`items`\*** – An array of items (data) to be used for width and height. Each item will be passed to the `renderer`.
- **`keys`\*** – See the second argument for [react-spring's useTransition](https://www.react-spring.io/docs/hooks/use-transition). This is either a function that takes each item from `items` and returns a unique identifier, an array of unique identifiers, or `null`.
- **`renderer`\*** – A component that takes the props `data`, `style`, and `index` where `data` is an individual item from `items`, `style` is the current style for your component, and `index` is just the position of your data in the `items` array.
- **`wrapper`** – This is either a string that names an html element (i.e. `'section'` or `'article'`) or it is a component that takes the props `ref` and `style`. Defaults to `'div'`.
- **`columnGap`** – The gap used between items horizontally. Defaults to `0`
- **`rowGap`** – Same as `columnGap` but is used between rows. Defaults to `0`
- **`transitionProps`** – Props passed to the call to `useTransition` allowing you to overwrite the default transition.```jsx
function ItemRenderer({ data, style }) {
// Note that you must be using an `animated` element for the styles to take effect.
// `animated` is imported from `react-spring`
return (
{data.value.last}, {data.value.first}
)
}function App() {
// You must have the properties `width` and `height`
// any other properties are just for you to render the element
const [itemsData, setItemsData] = useState([
{ value: { first: 'John', last: 'Doe' }, width: 150, height: 40 },
{ value: { first: 'Jane', last: 'Dane' }, width: 50, height: 90 },
{ value: { first: 'Josh', last: 'Dosh' }, width: 100, height: 50 },
{ value: { first: 'Jill', last: 'Dill' }, width: 280, height: 55 }
])// automatically applies `position: relative` to `wrapper`
return (
item.value.first}
renderer={ItemRenderer}
wrapper="section"
columnGap={25}
rowGap={50}
// Any other properties are passed to the wrapper component
className="Grid"
/>
)
}
```# License
License MIT © [Christopher H. Brown](https://github.com/ChrisBrownie55)