React JSON Syntax - Construct React elements, JSX and HTML with JSON without transpilers. JSONX supports React Function and Class Components, React Lazy and Suspense Components, and full support for React Hooks
JSONX is a module that creates React Elements, JSX and HTML from JSON.
The JSONX web module comes with batteries included so you can use JSONX in the browser without transpilers or any additional setup/configuration. The JSONX UMD is ideal for JAMstack Applications.
JSONX can also be used in existing react applications if you want to dynamically create elements with JSON. This works great for many scenarios when you want to manage your application views and components in a view management system or if you want to dynamically create React elements without using JSX.
JSONX supports all of Reacts features including Functional (with Hooks), Class-based, Suspense and Lazy components. JSONX supports JSON objects that implement the JXM (JSONX Markup) Spec.
$ npm i jsonx
import { * as jsonx } from 'jsonx';
const example_JXM_JSON = {
component:'p',
props:{ style:{ color:'blue' } },
children:'hello world'
};
//Rendering React Components
jsonx.getReactElement(example_JXM_JSON); // => JSX Equivalent: <p style={{color:'blue'}}>hello world</p>
//Generating HTML strings
jsonx.outputHTML({ jsonx: example_JXM_JSON, }); // => '<p style="color:blue;">hello world</p>'
//Generating JSX strings
jsonx.outputJSX({ jsonx: example_JXM_JSON, }); // => '<p style={{color:blue,}}>hello world</p>'
//Rendering HTML Dom with React
jsonx.jsonxRender({ jsonx: example_JXM_JSON, querySelector:'#myApp', });
// <!DOCTYPE html>
// <body>
// <div id="myApp">
// <p style="color:blue;">hello world</p>
// </div>
// </body>
//you can also use the simplified syntax
const simpleJXM_JSON = {
p:{
props:{ style:{ color:'blue' } },
children:'hello world'
}
}
//or if you have an element with no props, simply use {type:children}
const superSimpleJXM = {
ul:[
{li:'first!'},
{li:'second!'},
]
}
JSONX works by using JXM JSON to create react elements. JXM JSON Objects are valid JSON Objects that more or less mimics JSX in JSON notation with a couple of special properties. The properties for JSONX JSON are the arguments passed to React.createElement. The only required property is the component (which is passed as the type argument)
React.createElement(
type,
[props],
[...children]
)
You can pass React component libraries for additional components, or you own custom components (see External and Custom Components and Using Advanced Props for more details).
Note Make sure you have typescript installed
$ npm i -g typescript
For generating documentation
$ npm run doc
Check out https://repetere.github.io/jsonx/ for the full jsonx Documentation
$ npm test
Fork, write tests and create a pull request!
License
MIT
FAQs
React JSON Syntax - Construct React elements, JSX and HTML with JSON without transpilers. JSONX supports React Function and Class Components, React Lazy and Suspense Components, and full support for React Hooks
The npm package jsonx receives a total of 36 weekly downloads. As such, jsonx popularity was classified as not popular.
We found that jsonx demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Socket's new Alert Details page is designed to surface more context, with a clearer layout, reachability dependency chains, and structured review.
Product
Campaign-level threat intelligence in Socket now shows when active supply chain attacks affect your repositories and packages.
Research
Malicious PyPI package sympy-dev targets SymPy users, a Python symbolic math library with 85 million monthly downloads.