{"id":21043377,"url":"https://github.com/crystallizeapi/reactjs-components","last_synced_at":"2025-05-15T17:31:41.535Z","repository":{"id":54773712,"uuid":"484525383","full_name":"CrystallizeAPI/reactjs-components","owner":"CrystallizeAPI","description":null,"archived":false,"fork":false,"pushed_at":"2024-05-22T21:25:03.000Z","size":60,"stargazers_count":1,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-09-24T02:41:59.279Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/CrystallizeAPI.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":"2022-04-22T17:55:03.000Z","updated_at":"2024-05-22T21:23:44.000Z","dependencies_parsed_at":"2024-03-26T11:05:06.326Z","dependency_job_id":null,"html_url":"https://github.com/CrystallizeAPI/reactjs-components","commit_stats":{"total_commits":40,"total_committers":5,"mean_commits":8.0,"dds":0.275,"last_synced_commit":"bae8b30180285e23e1e3c83bbe4774d6b65a05f1"},"previous_names":[],"tags_count":23,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CrystallizeAPI%2Freactjs-components","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CrystallizeAPI%2Freactjs-components/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CrystallizeAPI%2Freactjs-components/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CrystallizeAPI%2Freactjs-components/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/CrystallizeAPI","download_url":"https://codeload.github.com/CrystallizeAPI/reactjs-components/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225365807,"owners_count":17462973,"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":[],"created_at":"2024-11-19T14:12:36.101Z","updated_at":"2024-11-19T14:12:37.000Z","avatar_url":"https://github.com/CrystallizeAPI.png","language":"TypeScript","readme":"# React JS Components\n\nThis brings Image, Grid and Content Transformer component to ease your rendering when using React JS.\n\n## Installation\n\nWith NPM:\n\n```bash\nnpm install @crystallize/reactjs-components\n```\n\nWith Yarn:\n\n```bash\nyarn add @crystallize/reactjs-components\n```\n\n## Image\n\nThis output an `img` tag with different source variations from Crystallize using _srcset_. Use this to easily build responsive images powered by Crystallize.\n\n```javascript\nimport { Image } from '@crystallize/reactjs-components/dist/image';\nconst imageFromCrystallize = {\n    url: '...',\n    variants: [...]\n}\n\n\u003cImage\n    {...imageFromCrystallize}\n    sizes=\"(max-width: 400px) 300w, 700px\"\n/\u003e\n```\n\nThere is a live demo: https://crystallizeapi.github.io/libraries/reactjs-components/image\n\n## Video\n\nThis output videos from Crystallize using the native video element.\n\n```javascript\nimport { Video } from '@crystallize/reactjs-components/dist/video';\nimport '@crystallize/reactjs-components/assets/video/styles.css';\nconst videoFromCrystallize = {\n    playlists: [...],\n    thumbnails: [...]\n}\n\n\u003cVideo\n    {...videoFromCrystallize}\n    thumbnmailProps={{ sizes: \"(max-width: 700px) 90vw, 700px\" }}\n/\u003e\n```\n\nThere is a live demo: https://crystallizeapi.github.io/libraries/reactjs-components/video\n\n## Grid\n\nThat makes it easy to render Crystallize grids with React JS. In order to use the grid renderer you'll need to have fetched your grid model. This can be fetched fairly easily from Crystallize's API via GraphQL.\n\nAt the minimum you will need to fetch layout of each column and some properties on the item. Your query might look something like this:\n\n```graphql\nquery grid($id: Int!, $language: String!) {\n    grid(id: $id, language: $language) {\n        rows {\n            columns {\n                layout {\n                    rowspan\n                    colspan\n                    colIndex\n                    rowIndex\n                }\n                item {\n                    name\n                }\n            }\n        }\n    }\n}\n```\n\nThen, inside your component, render the Grid, passing through the grid model as a prop. By default, the grid is rendered using CSS grid but it could also be a Table.\n\n```javascript\n\u003cGridRenderer grid={grid} type={GridRenderingType.Div} cellComponent={Cell} /\u003e\n\u003cGridRenderer grid={grid} type={GridRenderingType.Table} cellComponent={Cell} /\u003e\n\u003cGridRenderer grid={grid} type={GridRenderingType.RowCol} cellComponent={Cell} /\u003e\n```\n\nThere is a live demo: https://crystallizeapi.github.io/libraries/reactjs-components/grid\n\n### To go further\n\nIf you want full control over each of the cells, you can instead supply a function as the children of the grid component. This will allow you to iterate over each of the cells and mutate them as you please.\n\n```javascript\nconst children = ({ cells }) =\u003e {\n    return cells.map((cell) =\u003e (\n        \u003cdiv\n            style={{\n                gridColumn: `span ${cell.layout.colspan}`,\n                gridRow: `span ${cell.layout.rowspan}`,\n            }}\n        \u003e\n            {cell.item.name}\n        \u003c/div\u003e\n    ));\n};\n\nreturn (\n    \u003cGridRenderer grid={grid} type={GridRenderingType.Div} cellComponent={Cell}\u003e\n        {children}\n    \u003c/GridRenderer\u003e\n);\n```\n\n## Content Transformer\n\nThis helps you to transform Crystallize rich text json to React html components.\n\n```javascript\nconst overrides: Overrides = {\n    link: (props: NodeProps) =\u003e (\n        \u003ca href={props.metadata?.href}\u003e\n            \u003cNodeContent {...props} /\u003e\n        \u003c/a\u003e\n    ),\n};\n\n\u003cContentTransformer json={richTextJson} overrides={overrides} /\u003e;\n```\n\nThere is a live demo: https://crystallizeapi.github.io/libraries/reactjs-components/content-transformer\n\n[crystallizeobject]: crystallize_marketing|folder|6269c9819161f671155d939d\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcrystallizeapi%2Freactjs-components","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcrystallizeapi%2Freactjs-components","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcrystallizeapi%2Freactjs-components/lists"}