├── .editorconfig
├── .github
└── workflows
│ └── test.yml
├── .gitignore
├── CHANGELOG.md
├── LICENSE
├── README.md
├── jest.config.js
├── package.json
├── src
├── __helpers__
│ ├── burger.tsx
│ ├── data.ts
│ └── interfaces.ts
├── __tests__
│ ├── __snapshots__
│ │ └── index.tsx.snap
│ └── index.tsx
└── index.tsx
├── tsconfig.json
├── tsconfig.test.json
├── tsup.config.ts
└── yarn.lock
/.editorconfig:
--------------------------------------------------------------------------------
1 | root = true
2 |
3 | [*]
4 | charset = utf-8
5 | indent_style = space
6 | indent_size = 2
7 | end_of_line = lf
8 | insert_final_newline = true
9 | trim_trailing_whitespace = true
10 |
--------------------------------------------------------------------------------
/.github/workflows/test.yml:
--------------------------------------------------------------------------------
1 | name: Test and build
2 |
3 | on:
4 | push:
5 | branches: [main]
6 | pull_request:
7 | branches: [main]
8 |
9 | jobs:
10 | build-and-test:
11 | runs-on: ubuntu-latest
12 |
13 | steps:
14 | - name: Checkout code
15 | uses: actions/checkout@v2.0.0
16 |
17 | - name: Setup Node.js
18 | uses: actions/setup-node@v3
19 | with:
20 | node-version: 18
21 |
22 | - name: Check Yarn Version
23 | run: yarn --version
24 |
25 | - name: Install dependencies
26 | run: yarn
27 |
28 | - name: Run tests
29 | run: yarn test
30 |
31 | - name: Build
32 | run: |
33 | yarn build
34 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 |
2 | # See https://help.github.com/ignore-files/ for more about ignoring files.
3 |
4 | # dependencies
5 | node_modules
6 |
7 | # builds
8 | build
9 | dist
10 |
11 | # misc
12 | .DS_Store
13 | .env
14 | .env.local
15 | .env.development.local
16 | .env.test.local
17 | .env.production.local
18 |
19 | npm-debug.log*
20 | yarn-debug.log*
21 | yarn-error.log*
22 |
23 | .rpt2_cache
24 |
--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | # [0.8.0](https://github.com/measuredco/react-from-json/compare/v0.7.2...v0.8.0) (2023-12-23)
2 |
3 |
4 | ### Features
5 |
6 | * support React 18, modernise package build and dependencies ([ab60acb](https://github.com/measuredco/react-from-json/commit/ab60acba13b4f099c932d590493eca4b79e1d887))
7 |
8 |
9 |
10 | ## [0.7.2](https://github.com/measuredco/react-from-json/compare/v0.7.1...v0.7.2) (2020-10-22)
11 |
12 |
13 |
14 | ## [0.7.1](https://github.com/measuredco/react-from-json/compare/v0.7.0...v0.7.1) (2019-12-05)
15 |
16 |
17 |
18 | # [0.7.0](https://github.com/measuredco/react-from-json/compare/v0.6.0...v0.7.0) (2019-11-11)
19 |
20 |
21 | ### Bug Fixes
22 |
23 | * retain component keys on render ([d384dc9](https://github.com/measuredco/react-from-json/commit/d384dc949b9a86d7a63804ef873489486860e728))
24 |
25 |
26 | ### Features
27 |
28 | * pass propKey to mapped components ([1f13968](https://github.com/measuredco/react-from-json/commit/1f139684ab7b41113a64f21c70d995221345bd45))
29 |
30 |
31 |
32 | # [0.6.0](https://github.com/measuredco/react-from-json/compare/v0.5.0...v0.6.0) (2019-11-04)
33 |
34 |
35 | ### Features
36 |
37 | * add optional 'default' component mapping, for falling back when component doesn't exist ([8d818a9](https://github.com/measuredco/react-from-json/commit/8d818a983952cc0453faafb025e4c8fb3dc523b3))
38 | * pass _type to mapped components ([fc0a56b](https://github.com/measuredco/react-from-json/commit/fc0a56b38ced887c45bf2f6019440c564310af5d))
39 |
40 |
41 |
42 | # [0.5.0](https://github.com/measuredco/react-from-json/compare/v0.4.0...v0.5.0) (2019-09-19)
43 |
44 |
45 | ### Features
46 |
47 | * add support for non-standard JSON shapes via mapProp ([0b601db](https://github.com/measuredco/react-from-json/commit/0b601db1f2dae42b3032c175edf6634473ff65e3))
48 | * throw a useful error if component missing from components ([f873219](https://github.com/measuredco/react-from-json/commit/f873219318167e2bfb1bbc62390d0ed295f55000))
49 |
50 |
51 |
52 | # [0.4.0](https://github.com/measuredco/react-from-json/compare/v0.3.0...v0.4.0) (2018-10-26)
53 |
54 |
55 | ### Features
56 |
57 | * use array index for unique keys, and add propIndex prop ([c5df9d4](https://github.com/measuredco/react-from-json/commit/c5df9d4004be99afa38feaaae03bd0d00ae77e9b))
58 |
59 |
60 |
61 | # [0.3.0](https://github.com/measuredco/react-from-json/compare/v0.2.0...v0.3.0) (2018-10-17)
62 |
63 |
64 | ### Bug Fixes
65 |
66 | * resolve null props as expected ([5186b07](https://github.com/measuredco/react-from-json/commit/5186b07ad97c09e4e4d85c103cc3df874dca9b58))
67 |
68 |
69 | ### Features
70 |
71 | * resolve id prop from component JSON root ([214c256](https://github.com/measuredco/react-from-json/commit/214c2563b8e869ed5759742bd3bd0f9ab58dd9d0))
72 |
73 |
74 |
75 | # [0.2.0](https://github.com/measuredco/react-from-json/compare/v0.1.0...v0.2.0) (2018-10-01)
76 |
77 |
78 | ### Features
79 |
80 | * replace ComponentRef props with ComponentLookup components ([d77e080](https://github.com/measuredco/react-from-json/commit/d77e0804c689f3e18be6bf84e918c4d5de244f11))
81 |
82 |
83 |
84 | # 0.1.0 (2018-09-28)
85 |
86 |
87 |
88 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2020 Measured Corporation Ltd
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # react-from-json
2 |
3 | > Declare your React component tree in JSON
4 |
5 | [](https://www.npmjs.com/package/react-from-json) [](https://standardjs.com)
6 |
7 | ## Intro
8 |
9 | `react-from-json` lets you render React
10 |
11 | ```jsx
12 |
13 |
14 |
15 | ```
16 |
17 | from JSON
18 |
19 | ```json
20 | {
21 | "type": "Foo",
22 | "props": {
23 | "children": {
24 | "type": "Bar",
25 | "props": {
26 | "baz": "Hello, world"
27 | }
28 | }
29 | }
30 | }
31 | ```
32 |
33 | It also supports non-recursive structures.
34 |
35 | ## Install
36 |
37 | ```bash
38 | npm install --save react-from-json
39 | ```
40 |
41 | ## Usage
42 |
43 | ```jsx
44 | import React from "react";
45 | import ReactFromJSON from "react-from-json";
46 |
47 | const entry = {
48 | type: "Foo",
49 | props: {
50 | children: {
51 | type: "Bar",
52 | props: {
53 | baz: "Hello, world",
54 | },
55 | },
56 | },
57 | };
58 |
59 | const mapping = {
60 | Foo: ({ children }) => (
61 |
62 |
{children}
63 |
64 | ),
65 | Bar: ({ baz }) => {baz},
66 | };
67 |
68 | const Example = () => {
69 | return ;
70 | };
71 | ```
72 |
73 | ### Props passed to your components
74 |
75 | Props passed to your mapped components include
76 |
77 | - `propKey` - name of the prop that rendered your component
78 | - `propIndex` - index of your component if using [flat trees](#flat-trees)
79 | - `_type` - the `type` value for your component
80 | - `...props` - the resolved value of your `props` object, with relevant child nodes rendered as components
81 |
82 | ### Other JSON shapes
83 |
84 | 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.
85 |
86 | ```jsx
87 | import React from "react";
88 | import ReactFromJSON from "react-from-json";
89 | import mapping from "./mapping";
90 |
91 | const entryWithDifferentShape = {
92 | _type: "Foo",
93 | children: {
94 | _type: "Bar",
95 | baz: "Hello, world",
96 | },
97 | };
98 |
99 | const mapProp = (prop) => {
100 | if (prop._type) {
101 | const { _type, ...props } = prop;
102 |
103 | return {
104 | type: _type,
105 | props,
106 | };
107 | }
108 |
109 | return prop;
110 | };
111 |
112 | const Example = () => {
113 | return (
114 |
119 | );
120 | };
121 | ```
122 |
123 | ### Flat trees
124 |
125 | `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.
126 |
127 | #### The `` component
128 |
129 | `` simply maps to another component defined in a `components` object. If you were using it in React, you would use it like:
130 |
131 | ```jsx
132 |
133 | ```
134 |
135 | which would look up the `Button` component at index `0` in the `components` object, resolving to:
136 |
137 | ```jsx
138 |
139 | ```
140 |
141 | For `react-from-json` we use JSON, so we would write this:
142 |
143 | ```json
144 | {
145 | "type": "ComponentLookup",
146 | "props": {
147 | "componentType": "Button",
148 | "componentIndex": 0
149 | }
150 | }
151 | ```
152 |
153 | > 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.
154 |
155 | #### Example
156 |
157 | Here's the same example as above, instead using a `` for `entry.props.baz`, and providing a separate `components` object.
158 |
159 | ```jsx
160 | import React from "react";
161 | import ReactFromJSON from "react-from-json";
162 |
163 | const entry = {
164 | type: "Foo",
165 | props: {
166 | baz: {
167 | type: "ComponentLookup",
168 | props: {
169 | componentIndex: 0,
170 | componentType: "Bar",
171 | },
172 | },
173 | },
174 | };
175 |
176 | const mapping = {
177 | Foo: ({ baz }) => (
178 |