{"id":21995984,"url":"https://github.com/andria-dev/react-spring-grid","last_synced_at":"2026-04-11T12:43:40.931Z","repository":{"id":57345170,"uuid":"186638482","full_name":"andria-dev/react-spring-grid","owner":"andria-dev","description":"An animated \u003cGrid\u003e component built using absolute positioning and react-spring","archived":false,"fork":false,"pushed_at":"2019-06-16T07:00:15.000Z","size":458,"stargazers_count":2,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-17T03:06:46.807Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://codesandbox.io/s/trusting-goodall-cltwy?fontsize=14","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/andria-dev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-05-14T14:22:41.000Z","updated_at":"2021-08-30T15:13:44.000Z","dependencies_parsed_at":"2022-08-26T06:21:16.580Z","dependency_job_id":null,"html_url":"https://github.com/andria-dev/react-spring-grid","commit_stats":null,"previous_names":["chrisbrownie55/react-spring-grid"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/andria-dev/react-spring-grid","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andria-dev%2Freact-spring-grid","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andria-dev%2Freact-spring-grid/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andria-dev%2Freact-spring-grid/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andria-dev%2Freact-spring-grid/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/andria-dev","download_url":"https://codeload.github.com/andria-dev/react-spring-grid/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andria-dev%2Freact-spring-grid/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31681201,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-11T08:18:19.405Z","status":"ssl_error","status_checked_at":"2026-04-11T08:17:08.892Z","response_time":54,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-29T21:19:39.170Z","updated_at":"2026-04-11T12:43:40.890Z","avatar_url":"https://github.com/andria-dev.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🎉 react-spring-grid 🎉\n\nAn animated `\u003cGrid\u003e` 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.\n\n## Usage\n\n### Installation\n\nTo install `react-spring-grid` you will need to install this package, as well as, `react` and `react-spring`.\n\n```bash\npnpm i react react-spring react-spring-grid\n\n# or\n\nyarn add react react-spring react-spring-grid\n```\n\n### Example\n\nTo utilize the `\u003cGrid\u003e` component you need at least 3 of the 6 following things:\n\n\u003csmall\u003e\\* means required\u003c/small\u003e\n\n- **`items`\\*** – An array of items (data) to be used for width and height. Each item will be passed to the `renderer`.\n- **`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`.\n- **`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.\n- **`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'`.\n- **`columnGap`** – The gap used between items horizontally. Defaults to `0`\n- **`rowGap`** – Same as `columnGap` but is used between rows. Defaults to `0`\n- **`transitionProps`** – Props passed to the call to `useTransition` allowing you to overwrite the default transition.\n\n```jsx\nfunction ItemRenderer({ data, style }) {\n  // Note that you must be using an `animated` element for the styles to take effect.\n  // `animated` is imported from `react-spring`\n  return (\n    \u003canimated.div style={style} className=\"Item\"\u003e\n      {data.value.last}, {data.value.first}\n    \u003c/animated.div\u003e\n  )\n}\n\nfunction App() {\n  // You must have the properties `width` and `height`\n  // any other properties are just for you to render the element\n  const [itemsData, setItemsData] = useState([\n    { value: { first: 'John', last: 'Doe' }, width: 150, height: 40 },\n    { value: { first: 'Jane', last: 'Dane' }, width: 50, height: 90 },\n    { value: { first: 'Josh', last: 'Dosh' }, width: 100, height: 50 },\n    { value: { first: 'Jill', last: 'Dill' }, width: 280, height: 55 }\n  ])\n\n  // \u003cGrid\u003e automatically applies `position: relative` to `wrapper`\n  return (\n    \u003cGrid\n      items={itemsData}\n      keys={item =\u003e item.value.first}\n      renderer={ItemRenderer}\n      wrapper=\"section\"\n      columnGap={25}\n      rowGap={50}\n      // Any other properties are passed to the wrapper component\n      className=\"Grid\"\n    /\u003e\n  )\n}\n```\n\n# License\n\nLicense MIT © [Christopher H. Brown](https://github.com/ChrisBrownie55)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandria-dev%2Freact-spring-grid","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fandria-dev%2Freact-spring-grid","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandria-dev%2Freact-spring-grid/lists"}