Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/chrisvxd/react-from-json-fork
Declare your React component tree in JSON
https://github.com/chrisvxd/react-from-json-fork
ast headless headlesscms json react
Last synced: 2 months ago
JSON representation
Declare your React component tree in JSON
- Host: GitHub
- URL: https://github.com/chrisvxd/react-from-json-fork
- Owner: chrisvxd
- Created: 2019-12-05T19:24:53.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2022-12-09T00:56:23.000Z (about 2 years ago)
- Last Synced: 2024-10-18T15:05:09.618Z (3 months ago)
- Topics: ast, headless, headlesscms, json, react
- Language: TypeScript
- Size: 1.11 MB
- Stars: 4
- Watchers: 2
- Forks: 0
- Open Issues: 39
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# react-from-json
> Declare your React component tree in JSON
[](https://www.npmjs.com/package/react-from-json) [](https://standardjs.com)
[Example](http://hydrateio.github.io/react-from-json/)
## Intro
`react-from-json` lets you render React
```jsx
```
from JSON
```json
{
"type": "Burger",
"props": {
"chain": "Wahlburger",
"children": {
"type": "Patty",
"props": {
"variant": "impossible"
}
}
}
}
```
It also supports non-recursive structures.
## Install
```bash
npm install --save react-from-json
```
## Usage
```jsx
import React from "react";
import ReactFromJSON from "react-from-json";
const entry = {
type: "Burger",
props: {
chain: "Wahlburger",
children: {
type: "Patty",
props: {
variant: "Impossible"
}
}
}
};
const mapping = {
Burger: ({ chain, children }) => (
{chain}
{children}
),
Patty: ({ variant }) => {variant}
};
const Example = () => {
return ;
};
```
### Props passed to your components
Props passed to your mapped components include
- `propKey` - name of the prop that rendered your component
- `propIndex` - index of your component if using [flat trees](#flat-trees)
- `_type` - the `type` value for your component
- `...props` - the resolved value of your `props` object, with relevant child nodes rendered as components
### Other JSON shapes
If your data doesn't follow the `type` | `props` shape, `react-from-json` makes it easy to map your data on the fly using the `mapProp` prop.
```jsx
import React from "react";
import ReactFromJSON from "react-from-json";
import mapping from "./mapping";
const entryWithDifferentShape = {
_type: "Burger",
chain: "Wahlburger",
children: {
_type: "Patty",
variant: "Impossible"
}
};
const mapProp = prop => {
if (prop._type) {
const { _type, ...props } = prop;
return {
type: _type,
props
};
}
return prop;
};
const Example = () => {
return (
);
};
```
### Flat trees
`react-from-json` also supports flat, non-recursive structures via the special `` component. This is useful when working with typed systems like GraphQL, and you need to avoid unions.
#### The `` component
`` simply maps to another component defined in a `components` object. If you were using it in React, you would use it like:
```jsx
```
which would look up the `Button` component at index `0` in the `components` object, resolving to:
```jsx
Hello, World!
```
For `react-from-json` we use JSON, so we would write this:
```json
{
"type": "ComponentLookup",
"props": {
"componentType": "Button",
"componentIndex": 0
}
}
```
> The `id` here is set by the `componentIndex`, since we didn't specify one in the JSON. See this comment on IDs for more information.
#### Example
Here's the same example as above, instead using a `` for `entry.props.patty`, and providing a separate `components` object.
```jsx
import React from "react";
import ReactFromJSON from "react-from-json";
const entry = {
type: "Burger",
props: {
chain: "Wahlburger",
patty: {
type: "ComponentLookup",
props: {
componentIndex: 0,
componentType: "Patty"
}
}
}
};
const mapping = {
Burger: ({ chain, patty }) => (
{chain}
{patty}
),
Patty: ({ variant }) => {variant}
};
const components = {
Patty: [
{
type: "Patty",
props: {
variant: "Impossible"
}
}
]
};
const Example = () => {
return (
);
};
```
### A note on ids
`react-from-json` will map `id` from the root of your component JSON to the React component's `id` prop. Likewise, if you specify `id` under `props`, it will use this. If you use the `` component, `react-from-json` will use the array index as `id` unless another `id` is specified. **Your `id` will always take priority.**
### With TypeScript
`react-from-json` supports generic types for use with TypeScript.
```tsx
import { entry, mapping, components } from "./aboveExample";
import ReactFromJSON from "react-from-json";
interface Components {
Patty: object[];
}
interface Mapping {
Burger: React.ReactNode;
Patty: React.ReactNode;
}
class BurgerReactFromJSON extends ReactFromJSON {
render(): JSX.Element {
return super.render();
}
}
const Example = () => {
return (
);
};
```
## License
MIT © [hydrateio](https://github.com/hydrateio)