{"id":17966054,"url":"https://github.com/maxsans/react-diamond","last_synced_at":"2026-04-26T23:31:49.586Z","repository":{"id":258405254,"uuid":"868851504","full_name":"maxsans/react-diamond","owner":"maxsans","description":"A React component library for creating diamond-shaped containers","archived":false,"fork":false,"pushed_at":"2024-12-03T08:03:40.000Z","size":11,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-03T20:33:41.920Z","etag":null,"topics":["react","react-diamond","scss"],"latest_commit_sha":null,"homepage":"","language":"SCSS","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/maxsans.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-10-07T09:47:02.000Z","updated_at":"2024-12-03T08:03:42.000Z","dependencies_parsed_at":"2025-04-03T20:39:41.924Z","dependency_job_id":null,"html_url":"https://github.com/maxsans/react-diamond","commit_stats":null,"previous_names":["maxsans/react-diamond"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/maxsans/react-diamond","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maxsans%2Freact-diamond","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maxsans%2Freact-diamond/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maxsans%2Freact-diamond/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maxsans%2Freact-diamond/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/maxsans","download_url":"https://codeload.github.com/maxsans/react-diamond/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maxsans%2Freact-diamond/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32317163,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-26T23:26:28.701Z","status":"ssl_error","status_checked_at":"2026-04-26T23:26:25.802Z","response_time":129,"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":["react","react-diamond","scss"],"created_at":"2024-10-29T13:07:17.627Z","updated_at":"2026-04-26T23:31:49.565Z","avatar_url":"https://github.com/maxsans.png","language":"SCSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ![logo](https://raw.githubusercontent.com/maxsans/template-react-diamond/refs/heads/main/img/react-diamond.png) `react-diamond`\n\n[![npm version](https://badge.fury.io/js/react-diamond-container.svg)](https://badge.fury.io/js/react-diamond)\n\nA React component library for creating diamond-shaped containers with lazy-loaded images and customizable styles.\n\n[Demo](https://react-diamond.sinead.fr/)\n\n\u003cimg src='https://raw.githubusercontent.com/maxsans/template-react-diamond/refs/heads/main/img/FullScreen5items.png' alt='Diamond Container on PC' /\u003e\n\u003cimg src='https://github.com/maxsans/template-react-diamond/blob/main/img/FullScreenMobile5items.png?raw=true' alt='Diamond Container on Mobile' /\u003e\n\u003cimg src='https://github.com/maxsans/template-react-diamond/blob/main/img/FullScreen3items.png?raw=true' alt='Diamond Container with Three Items' /\u003e\n\n### Content\n\n- Installation\n- Usage\n- Customization\n- Demo\n- Notes\n\n### Installation\n\n```bash\nyarn add react-diamond@lastest\n```\n\n### Usage\n\n#### DiamondContainer\n\n| Property | Type                 | Description                                         | Default |\n| -------- | -------------------- | --------------------------------------------------- | ------- |\n| `items`  | `Array\u003cDiamondItem\u003e` | Array of items to display in the diamond containers | `[]`    |\n\n#### DiamondItem\n\n| Property  | Type       | Description                               |\n| --------- | ---------- | ----------------------------------------- |\n| `title`   | `string`   | Title of the item                         |\n| `onClick` | `function` | Function to call when the item is clicked |\n| `image`   | `string`   | URL of the image to display               |\n\n### Customization\n\nYou can customize the appearance of the diamond containers using CSS variables:\n\n| Variable                   | Description                        |\n| -------------------------- | ---------------------------------- |\n| `--borderColorDiamond`     | Color of the diamond border        |\n| `--textColorDiamond`       | Color of the text                  |\n| `--backgroundColorDiamond` | Background color behind the images |\n\n### Example\n\n```tsx\nimport React from \"react\";\nimport Diamond from \"react-diamond-container\";\nimport img1 from \"path/to/img1.png\";\nimport img2 from \"path/to/img2.png\";\n\nconst items = [\n  {\n    title: \"Part 1\",\n    onClick() {\n      alert(\"Part 1 clicked\");\n    },\n    image: img1,\n  },\n  {\n    title: \"Part 2\",\n    onClick() {\n      alert(\"Part 2 clicked\");\n    },\n    image: img2,\n  },\n  // Add more items as needed\n];\n\nconst App = () =\u003e (\n  \u003cdiv\n    style={{\n      \"--borderColorDiamond\": \"#5e3a78\",\n      \"--textColorDiamond\": \"#ffffff\",\n      \"--backgroundColorDiamond\": \"#000000\",\n    }}\n  \u003e\n    \u003cDiamond items={items} /\u003e\n  \u003c/div\u003e\n);\n\nexport default App;\n```\n\nTip: For a better experience, if you want the component in full screen, deactivate the scroll bar.\n\n```scss\nbody {\n  overflow: auto;\n}\n\n/* Firefox */\n@supports (-moz-appearance: none) {\n  body {\n    scrollbar-width: none;\n  }\n}\n\n/* WebKit (Chrome, Safari) */\n@media screen and (-webkit-min-device-pixel-ratio: 0) {\n  body::-webkit-scrollbar {\n    width: 0;\n  }\n}\n```\n\nTip: Add this link to your `index.html` for the font family.\n\n```html\n\u003clink\n  href=\"https://fonts.googleapis.com/css?family=JetBrains Mono\"\n  rel=\"stylesheet\"\n/\u003e\n```\n\n### Demo\n\nCheck out the [demo](https://react-diamond.sinead.fr/) to see the component in action. You can fount the code source at [template](https://github.com/maxsans/template-react-diamond)\n\n### Notes\n\n- The library is available only for React.\n- The layout changes from horizontal to vertical on mobile devices.\n- Single item layouts are also supported.\n- Images are lazy-loaded for performance optimization.\n- Continuous improvements and updates are being made.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaxsans%2Freact-diamond","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmaxsans%2Freact-diamond","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaxsans%2Freact-diamond/lists"}