https://github.com/crystallizeapi/reactjs-components
https://github.com/crystallizeapi/reactjs-components
Last synced: 8 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/crystallizeapi/reactjs-components
- Owner: CrystallizeAPI
- License: mit
- Created: 2022-04-22T17:55:03.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2024-05-22T21:25:03.000Z (over 1 year ago)
- Last Synced: 2024-09-24T02:41:59.279Z (over 1 year ago)
- Language: TypeScript
- Size: 58.6 KB
- Stars: 1
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React JS Components
This brings Image, Grid and Content Transformer component to ease your rendering when using React JS.
## Installation
With NPM:
```bash
npm install @crystallize/reactjs-components
```
With Yarn:
```bash
yarn add @crystallize/reactjs-components
```
## Image
This output an `img` tag with different source variations from Crystallize using _srcset_. Use this to easily build responsive images powered by Crystallize.
```javascript
import { Image } from '@crystallize/reactjs-components/dist/image';
const imageFromCrystallize = {
url: '...',
variants: [...]
}
```
There is a live demo: https://crystallizeapi.github.io/libraries/reactjs-components/image
## Video
This output videos from Crystallize using the native video element.
```javascript
import { Video } from '@crystallize/reactjs-components/dist/video';
import '@crystallize/reactjs-components/assets/video/styles.css';
const videoFromCrystallize = {
playlists: [...],
thumbnails: [...]
}
```
There is a live demo: https://crystallizeapi.github.io/libraries/reactjs-components/video
## Grid
That 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.
At the minimum you will need to fetch layout of each column and some properties on the item. Your query might look something like this:
```graphql
query grid($id: Int!, $language: String!) {
grid(id: $id, language: $language) {
rows {
columns {
layout {
rowspan
colspan
colIndex
rowIndex
}
item {
name
}
}
}
}
}
```
Then, 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.
```javascript
```
There is a live demo: https://crystallizeapi.github.io/libraries/reactjs-components/grid
### To go further
If 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.
```javascript
const children = ({ cells }) => {
return cells.map((cell) => (
{cell.item.name}
));
};
return (
{children}
);
```
## Content Transformer
This helps you to transform Crystallize rich text json to React html components.
```javascript
const overrides: Overrides = {
link: (props: NodeProps) => (
),
};
;
```
There is a live demo: https://crystallizeapi.github.io/libraries/reactjs-components/content-transformer
[crystallizeobject]: crystallize_marketing|folder|6269c9819161f671155d939d