17 |
18 |
19 |
20 | ## Install
21 |
22 | ```
23 | yarn add react-json-reconciler
24 | npm i --save react-json-reconciler
25 | ```
26 |
27 | ## Usage
28 |
29 | There are 4 primitive JSX elements, that can be used to construct a _normal_ JSX tree. All the things you'd expect to have access to in `React` (`state`, `hooks` `props`) all work as they normally would. To serialize the elements into JSON, call `render` and await the response. This will wait for all `useEffect` and `setState` updates to settle before returning the result.
30 |
31 | ```tsx
32 | import React from "react";
33 | import { render } from "react-json-reconciler";
34 |
35 | const element = (
36 |
37 |
38 |
39 | Value 1
40 |
41 |
42 | Value 2
43 |
44 | );
45 |
46 | const { jsonValue } = await render(element);
47 | ```
48 |
49 | The above will generate
50 |
51 | ```json
52 | {
53 | "Prop 1": ["Value 1"],
54 | "Prop 2": "Value 2"
55 | }
56 | ```
57 |
58 | ### Source Maps
59 |
60 | In order to generate source-map support, `React` must be in _development_ mode (`process.env.NODE_ENV != 'production'`), and the [@babel/plugin-transform-react-jsx-source](https://babeljs.io/docs/en/babel-plugin-transform-react-jsx-source) plugin enabled (included as part of `@babel/preset-react`)
61 |
62 | Pass the `collectSourceMap: true` option to the `render` method.
63 |
64 | ### Refs
65 |
66 | For each of the primitive types, any `ref` will return a respective JSON AST node. This allows users to introspect and manipulate the tree before rendering when coupled with a `useEffect()` or `useLayoutEffect()`.
67 |
68 | Example:
69 |
70 | ```tsx
71 | import React from "react";
72 |
73 | const CustomComponent = (props) => {
74 | const objRef = React.useRef(null);
75 |
76 | React.useEffect(() => {
77 | // A chance to introspect the JSON AST node before being serialized
78 | }, [objRef]);
79 |
80 | return {props.children};
81 | };
82 | ```
83 |
84 | ## License
85 |
86 | `react-json-reconciler` is provided under the [MIT](./LICENSE) license.
87 |
88 | ## Contributors ✨
89 |
90 | Feel free to open an issue or a pull request!
91 |
92 | Make sure to read our [code of conduct](./CODE_OF_CONDUCT.md).
93 |
94 | We actively welcome pull requests. Learn how to [contribute](./CONTRIBUTING.md).
95 |
96 | Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
97 |
98 |
99 |
100 |
101 |
3 | 
14 | 
