This package has been deprecated

Author message:

will be changed tree scripture

react-tree-template

0.9.0 • Public • Published

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>

MIT

Versions

Current Tags

  • Version
    Downloads (Last 7 Days)
    • Published

Version History

Package Sidebar

Install

npm i react-tree-template

Weekly Downloads

1

Version

0.9.0

License

MIT

Unpacked Size

40.1 kB

Total Files

17

Last publish

Collaborators

  • shoonia