{"id":21043369,"url":"https://github.com/crystallizeapi/reactjs-hooks","last_synced_at":"2025-03-13T21:44:29.678Z","repository":{"id":57681825,"uuid":"473058701","full_name":"CrystallizeAPI/reactjs-hooks","owner":"CrystallizeAPI","description":null,"archived":false,"fork":false,"pushed_at":"2023-01-19T03:14:37.000Z","size":85,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-28T12:30:00.462Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://crystallizeapi.github.io/libraries/","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}},"created_at":"2022-03-23T06:12:12.000Z","updated_at":"2023-02-19T16:46:03.000Z","dependencies_parsed_at":"2023-02-10T20:01:12.106Z","dependency_job_id":null,"html_url":"https://github.com/CrystallizeAPI/reactjs-hooks","commit_stats":null,"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CrystallizeAPI%2Freactjs-hooks","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CrystallizeAPI%2Freactjs-hooks/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CrystallizeAPI%2Freactjs-hooks/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CrystallizeAPI%2Freactjs-hooks/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/CrystallizeAPI","download_url":"https://codeload.github.com/CrystallizeAPI/reactjs-hooks/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243489812,"owners_count":20298997,"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:35.589Z","updated_at":"2025-03-13T21:44:29.649Z","avatar_url":"https://github.com/CrystallizeAPI.png","language":"TypeScript","readme":"# React JS Hooks\n\nThis is the **JS API Client** wrapper for React JS using hooks.\n\nIt provides Hooks and a Provider to handle a Crystallize State.\n\n## Installation\n\nWith NPM\n\n```bash\nnpm install @crystallize/reactjs-hooks\n```\n\nWith Yarn\n\n```bash\nyarn add @crystallize/reactjs-hooks\n```\n\n## Usage\n\n```javascript\nimport { CrystallizeProvider } from '@crystallize/reactjs-hooks';\nReactDOM.render(\n    \u003cCrystallizeProvider language=\"en\" tenantIdentifier=\"furniture\"\u003e\n        \u003cApp /\u003e\n    \u003c/CrystallizeProvider\u003e,\n    document.getElementById('root'),\n);\n```\n\nAnd then anywhere in the component tree:\n\n```javascript\nimport { useCrystallize } from '@crystallize/reactjs-hooks';\nconst { state, dispatch, apiClient, helpers } = useCrystallize();\n\n// Component A\n\nuseEffect(() =\u003e {\n    (async () =\u003e {\n        const caller = apiClient.catalogueApi;\n        const query = `query ($language: String!, $path: String!) {\n                    catalogue(language: $language, path: $path) {\n                        ... on Product {\n                        name\n                        }\n                    }\n                }`;\n        const response = await caller(query, {\n            language: 'en',\n            path: '/shop/chairs/bamboo-chair',\n        });\n\n        console.log(response.data.catalogue.name);\n    })();\n}, []);\n```\n\nAs you can see, you get direct access to a built **apiClient**. You also get access to a helpers object that wraps the following constructors from the JS API Client:\n\n-   catalogueFetcher\n-   navigationFetcher\n-   productHydrater\n-   orderFetcher\n\nBut on those, in the React JS Context you don’t have to provide the language, because the context knows it.\n\nThe State holds the configuration and the language, and the Dispatch exposes:\n\n-   loading: (state: boolean)\n-   changeLanguage: (language: string)\n-   updateConfiguration: (configuration: ClientConfiguration)\n\nYou can check out this live demo: https://crystallizeapi.github.io/libraries/reactjs-hooks/use-crystallize\n\n[crystallizeobject]: crystallize_marketing|folder|62561a0b0aab13b2ea127afe\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcrystallizeapi%2Freactjs-hooks","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcrystallizeapi%2Freactjs-hooks","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcrystallizeapi%2Freactjs-hooks/lists"}