react-tree-template
React component for render JSON tree templates
npm install react-tree-template
# or
yarn add react-tree-template
Example
import React from 'react';
import ReactDOM from 'react-dom';
import { ReactTreeTemplate, setKeys } from 'react-tree-template';
const json = [
{
"tagName": "h1",
"children": "Project"
},
{
"tagName": "ul",
"children": [
{
"tagName": "li",
"children": {
"tagName": "a",
"attributes": {
"href": "https://github.com/shoonia/react-tree-template"
},
"children": "GitHub"
}
},
{
"tagName": "li",
"children": {
"tagName": "a",
"attributes": {
"href": "https://www.npmjs.com/package/react-tree-template"
},
"children": "npm"
}
}
]
}
];
// Create unique keys for each element
// https://reactjs.org/docs/lists-and-keys.html
const tree = setKeys(json);
ReactDOM.render(
<ReactTreeTemplate tree={tree} />,
document.getElementById('root')
);
output:
<div>
<h1>Project</h1>
<ul>
<li>
<a href="https://github.com/shoonia/react-tree-template">GitHub</a>
</li>
<li>
<a href="https://www.npmjs.com/package/react-tree-template">npm</a>
</li>
</ul>
</div>
Whitelist Tags
Allowed tags
<a> <abbr> <address>
<b> <bdi> <bdo> <blockquote> <br>
<cite> <code>
<data> <dd> <del> <dfn> <dl> <dt>
<em>
<h1> <h2> <h3> <h4> <h5> <h6> <hr>
<i> <ins>
<kbd>
<li>
<mark>
<ol>
<p> <pre>
<q>
<rp> <rt> <ruby>
<s> <small> <strong> <sub> <sup>
<time>
<u> <ul>
<wbr>
Blacklist Tags
Will be removed with all self children
<applet> <area> <audio>
<base> <bgsound> <body> <button>
<canvas> <command> <comment>
<datalist>
<embed>
<form> <frameset>
<head>
<html>
<iframe> <img> <input>
<link>
<map> <meta> <meter>
<noembed> <noframes> <noscript>
<object> <optgroup> <option>
<param> <picture> <progress>
<samp> <script> <select> <source> <spacer> <style> <svg>
<template>
<track>
<video>