{"id":19892114,"url":"https://github.com/otterdev-io/sanity-react-extra","last_synced_at":"2025-05-02T18:31:37.289Z","repository":{"id":57134447,"uuid":"330551092","full_name":"otterdev-io/sanity-react-extra","owner":"otterdev-io","description":"Components for react-based frontends using sanity.io","archived":false,"fork":false,"pushed_at":"2022-08-29T11:02:51.000Z","size":32,"stargazers_count":6,"open_issues_count":2,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-03-24T21:20:40.355Z","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":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/otterdev-io.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-01-18T04:09:17.000Z","updated_at":"2022-06-28T00:08:39.000Z","dependencies_parsed_at":"2022-09-04T09:11:34.081Z","dependency_job_id":null,"html_url":"https://github.com/otterdev-io/sanity-react-extra","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/otterdev-io%2Fsanity-react-extra","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/otterdev-io%2Fsanity-react-extra/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/otterdev-io%2Fsanity-react-extra/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/otterdev-io%2Fsanity-react-extra/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/otterdev-io","download_url":"https://codeload.github.com/otterdev-io/sanity-react-extra/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252088499,"owners_count":21692805,"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-12T18:21:33.290Z","updated_at":"2025-05-02T18:31:33.313Z","avatar_url":"https://github.com/otterdev-io.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# sanity-react-extra\nComponents for react-based frontends using sanity.io\n\n## SanityImg\nAn image component that will create an image tag for your sanity image. If the groq query fetches the image dimensions:\n- Setting width or height will set the other one according to image aspect ratio, ensuring no layout shift occurs during rendering. This helps page performance.\n- srcSets will be set.\n\nTo easily fetch dimensions for an image, use the `withDimensions` function in your query:\n```groq\nimport groq from \"groq\"\nimport { withDimensions } from \"sanity-react-extra\"\n\nconst query =  groq`*[] {\n  ...,\n  \"image\": ${withDimensions(\"image\")}\n}`\n```\n\nTo use the component, you must provide an imageUrlBuilder, from @sanity/client or sanity-next-extra for example, as well as the image.\n```jsx\nimport { SanityImg } from \"sanity-react-extra\"\n\n  \u003cSanityImg builder={imageUrlBuilder} image={image} \n    //optional, set width or height and the other one will keep aspect\n    width={100}\n    //optional, will keep aspect\n    height={100}\n    //optional\n    className=\"image\"\n    //other img props\n    alt=\"An image\"\n  /\u003e\n```\n\n## renderObjectArray\nUsed to render an array of objects. This is useful when your sanity schema for a page follows the 'page builder' pattern, where the page is built out of sections:\n```js\n{\n name: \"page\",\n type: \"document\",\n fields: [\n   {\n     name: \"sections\",\n     title: \"Sections\",\n     type: \"array\",\n     of: [\n        {type: \"header\"},\n        {type: \"body\"},\n        {type: \"footer\"},\n     ]\n   }\n ]\n}\n```\n\nTo render the schema, just provide components for each type:\n\n```jsx\n\nimport { renderObjectArray } from \"sanity-react-extra\"\n\nconst Header = (props) =\u003e \u003cnav\u003eHeader\u003c/nav\u003e\nconst Body = (props) =\u003e\u003cdiv\u003eBody\u003c/div\u003e\n\nrenderObjectArray(page.sections, {\n  header: Header,\n  body: Body,\n  //or to inline the component:\n  footer: useCallback((props)=\u003e\u003cdiv\u003eFooter\u003c/div\u003e, [])\n})\n```\n## rgba\nRender a color picker color from `@sanity/color-input` to a string for use in css:\n```js\nimport { rgba } from \"sanity-react-extra\"\n\nrgba(color)\n\n// = \"rgba(1,0.2,0.3,0.1)\"\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fotterdev-io%2Fsanity-react-extra","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fotterdev-io%2Fsanity-react-extra","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fotterdev-io%2Fsanity-react-extra/lists"}