https://github.com/otterdev-io/sanity-react-extra
Components for react-based frontends using sanity.io
https://github.com/otterdev-io/sanity-react-extra
Last synced: about 1 year ago
JSON representation
Components for react-based frontends using sanity.io
- Host: GitHub
- URL: https://github.com/otterdev-io/sanity-react-extra
- Owner: otterdev-io
- Created: 2021-01-18T04:09:17.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2022-08-29T11:02:51.000Z (almost 4 years ago)
- Last Synced: 2024-03-24T21:20:40.355Z (over 2 years ago)
- Language: TypeScript
- Size: 31.3 KB
- Stars: 6
- Watchers: 2
- Forks: 1
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# sanity-react-extra
Components for react-based frontends using sanity.io
## SanityImg
An image component that will create an image tag for your sanity image. If the groq query fetches the image dimensions:
- 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.
- srcSets will be set.
To easily fetch dimensions for an image, use the `withDimensions` function in your query:
```groq
import groq from "groq"
import { withDimensions } from "sanity-react-extra"
const query = groq`*[] {
...,
"image": ${withDimensions("image")}
}`
```
To use the component, you must provide an imageUrlBuilder, from @sanity/client or sanity-next-extra for example, as well as the image.
```jsx
import { SanityImg } from "sanity-react-extra"
```
## renderObjectArray
Used 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:
```js
{
name: "page",
type: "document",
fields: [
{
name: "sections",
title: "Sections",
type: "array",
of: [
{type: "header"},
{type: "body"},
{type: "footer"},
]
}
]
}
```
To render the schema, just provide components for each type:
```jsx
import { renderObjectArray } from "sanity-react-extra"
const Header = (props) => Header
const Body = (props) =>
Body
renderObjectArray(page.sections, {
header: Header,
body: Body,
//or to inline the component:
footer: useCallback((props)=>
Footer, [])
})
```
## rgba
Render a color picker color from `@sanity/color-input` to a string for use in css:
```js
import { rgba } from "sanity-react-extra"
rgba(color)
// = "rgba(1,0.2,0.3,0.1)"
```