❤Node's Pastoral Musicians

    npm

    Sign UpSign In

    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

    Keywords

    Install

    npm i react-tree-template

    Repository

    Gitgithub.com/shoonia/react-tree-template

    Homepage

    github.com/shoonia/react-tree-template#readme

    DownloadsWeekly Downloads

    2

    Version

    0.9.0

    License

    MIT

    Unpacked Size

    40.1 kB

    Total Files

    17

    Last publish

    Collaborators

    • shoonia
    Try on RunKit
    Report malware