{"id":13808464,"url":"https://github.com/significa/react-snuggle","last_synced_at":"2025-05-14T02:32:00.322Z","repository":{"id":33006150,"uuid":"146896507","full_name":"significa/react-snuggle","owner":"significa","description":"An intimate and comfortable way to layout your components. (NOT MAINTAINED)","archived":false,"fork":false,"pushed_at":"2023-01-27T06:57:48.000Z","size":3277,"stargazers_count":261,"open_issues_count":17,"forks_count":9,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-11-11T21:45:42.985Z","etag":null,"topics":["css","css-grid","masonry","react","tiles"],"latest_commit_sha":null,"homepage":"https://significa.github.io/react-snuggle","language":"JavaScript","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/significa.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":"2018-08-31T13:35:28.000Z","updated_at":"2024-03-14T15:38:26.000Z","dependencies_parsed_at":"2023-02-18T05:30:29.684Z","dependency_job_id":null,"html_url":"https://github.com/significa/react-snuggle","commit_stats":null,"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/significa%2Freact-snuggle","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/significa%2Freact-snuggle/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/significa%2Freact-snuggle/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/significa%2Freact-snuggle/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/significa","download_url":"https://codeload.github.com/significa/react-snuggle/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225273240,"owners_count":17448073,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["css","css-grid","masonry","react","tiles"],"created_at":"2024-08-04T01:01:43.487Z","updated_at":"2024-11-19T00:30:47.608Z","avatar_url":"https://github.com/significa.png","language":"JavaScript","readme":"\u003cp align=\"center\"\u003e\n  \u003cimg width=\"100%\" alt=\"React Snuggle\" src=\"https://user-images.githubusercontent.com/4838076/45479304-097f6780-b73e-11e8-8821-fee771fa88ad.png\"\u003e\n\u003c/p\u003e\n\n\u003cimg src=\"https://badgen.net/bundlephobia/minzip/react-snuggle\" alt=\"minzip\" /\u003e\nLightweight React component to create css-based masonry-like layouts.  \nSnuggle all your components really tight 🛌\n\n[Demo](https://significa.github.io/react-snuggle/)\n\nLike a loving couple snuggling in bed, `react-snuggle` basically tries to make everything very intimate and comfortable by filling every space available (using CSS grid and a bit of javascript).\n\n## Features\n\n- **🤟 Responsive:** It works on all size screens;\n- **🤙 Customizable:** Easily change how your elements should snuggle;\n- **🤝 Use your favorite library:** CSS-in-JS, css modules, plain css, whatever. Feel free to use whatever you want;\n\n#### Install:\n\n```sh\nyarn add react-snuggle\n```\n\n#### Usage:\n\n```jsx\nimport Snuggle from 'react-snuggle'\n\nconst List = () =\u003e (\n  \u003cSnuggle\u003e\n    \u003cdiv\u003eItem\u003c/div\u003e\n    \u003cdiv\u003eItem\u003c/div\u003e\n    ...\n  \u003c/Snuggle\u003e\n)\n```\n\n### Options\n\n| Name        | Type            | Default   |\n| ----------- | --------------- | --------- |\n| item        | _React.Element_ | `\u003cdiv /\u003e` |\n| container   | _React.Element_ | `\u003cdiv /\u003e` |\n| rowGap      | _Number_        | 20        |\n| columnWidth | _Number_        | 250       |\n\n### Methods\n\n**resize**\nRecalculate all spaces available and snuggle each element z its space, it is helpful for lazing loading, resize listeners, and loading images.\n\nExample:\n\n```jsx\nconst Component = () =\u003e {\n  const snuggleRef = useRef()\n\n  const onLoad = () =\u003e {\n    if (snuggleRef.current) {\n      snuggleRef.current.resize()\n    }\n  }\n\n  return (\n    \u003cSnuggle ref={snuggleRef}\u003e\n      \u003cimg src=\"example.jpg\" onLoad={onLoad} /\u003e\n    \u003c/Snuggle\u003e\n  )\n}\n```\n\n### Todo\n\n- [ ] Span options (element fill two columns or more);\n- [ ] Filter elements;\n- [ ] Missing tests;\n- [ ] ...\n\n### License\n\n[MIT](https://github.com/Significa/react-snuggle/blob/master/LICENSE)\n\n### Kudos\n\n@andybarefoot\n[Masonry style layout with CSS Grid](https://medium.com/@andybarefoot/a-masonry-style-layout-using-css-grid-8c663d355ebb)\n\n---\n\n\u003cimg width=\"130\" alt=\"Significa Lda\" src=\"https://user-images.githubusercontent.com/4838076/38634265-6545f090-3d98-11e8-8869-c5e477648fdf.png\"\u003e\n\n[Significa](https://significa.pt/) is an Oporto based digital studio founded in late 2013. Despite being specialised in Interaction Design and Brand Development, we believe that good design thinking can answer almost any question and solve most problems. We aim to provide meaningful design solutions to achieve the best user engagement possible in any situation.\n","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsignifica%2Freact-snuggle","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsignifica%2Freact-snuggle","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsignifica%2Freact-snuggle/lists"}