npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-json-reconciler

v3.0.1

Published

A reconciler for creating JSON objects from a react-jsx tree

Downloads

2,757

Readme

This project leverages the react-reconciler to allow users to serialize JSX trees into JSON objects.


Install

yarn add react-json-reconciler
npm i --save react-json-reconciler

Usage

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.

import React from "react";
import { render } from "react-json-reconciler";

const element = (
  <obj>
    <property key="Prop 1">
      <array>
        <value>Value 1</value>
      </array>
    </property>
    <property key="Prop 2">Value 2</property>
  </obj>
);

const { jsonValue } = await render(element);

The above will generate

{
  "Prop 1": ["Value 1"],
  "Prop 2": "Value 2"
}

Source Maps

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 plugin enabled (included as part of @babel/preset-react)

Pass the collectSourceMap: true option to the render method.

Refs

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().

Example:

import React from "react";

const CustomComponent = (props) => {
  const objRef = React.useRef(null);

  React.useEffect(() => {
    // A chance to introspect the JSON AST node before being serialized
  }, [objRef]);

  return <obj ref={objRef}>{props.children}</obj>;
};

License

react-json-reconciler is provided under the MIT license.

Contributors ✨

Feel free to open an issue or a pull request!

Make sure to read our code of conduct.

We actively welcome pull requests. Learn how to contribute.

Thanks goes to these wonderful people (emoji key):

This project follows the all-contributors specification. Contributions of any kind welcome!