Nth Phonetic Mnemonic

    jsx-dom-runtime
    TypeScript icon, indicating that this package has built-in type declarations

    0.17.2 • Public • Published

    jsx-dom-runtime

    A tiny in 500 bytes library to JSX syntax templates for DOM.

    test status npm version

    Install

    npm i jsx-dom-runtime
    # or
    yarn add jsx-dom-runtime

    How to use

    .babelrc

    {
      "presets": [
        "jsx-dom-runtime/babel-preset"
      ]
    }

    Example

    import { createRef } from 'jsx-dom-runtime';
    
    const App = () => {
      const List = createRef();
    
      const addItem = () => {
        // append to the end of the list
        <List.current>
          <li>New Item</li>
        </List.current>
      };
    
      return (
        <>
          <button type="button" onClick={addItem}>
            Add Item
          </button>
          <ul ref={List} />
        </>
      );
    };
    
    // append to the end of the head
    <document.head>
      <link rel="stylesheet" href="/style.css" />
    </document.head>;
    
    // append to the end the the body
    <document.body id="root">
      <App />
    </document.body>;

    Demo

    Syntax

    Creating Refs

    import { createRef } from 'jsx-dom-runtime';
    
    let i = 0;
    
    const ref = createRef();
    
    <document.body>
      <p ref={ref}>{i}</p>
      <button type="button" onClick={() => {
        ref.current.textContent = ++i;
      }}>
        + 1
      </button>
    </document.body>;

    Callback Refs

    <document.body>
      <input ref={(node) => {
        setTimeout(() => node.focus(), 100);
      }} />
    </document.body>;

    Extend

    Add custom attributes behavior

    import { Extend } from 'jsx-dom-runtime/jsx-runtime';
    
    Extend({
      classList(node, value) {
        node.setAttribute('class', value.filter(Boolean).join(' '));
      },
    
      dataset(node, value) {
        for (let key in value) {
          node.dataset[key] = value[key];
        }
      },
    });
    
    <document.body>
      <div classList={['one', 'two']} dataset={{ testid: 'test', hook: 'text' }} />
    </document.body>;

    Result

    <div class="one two" data-testid="test" data-hook="text"></div>

    Parse from string

    import { parseFromString } from 'jsx-dom-runtime';
    
    const svg = parseFromString(
      `<svg width="24" height="24" aria-hidden="true">
        <path d="M12 12V6h-1v6H5v1h6v6h1v-6h6v-1z"/>
      </svg>`
    );
    
    <document.body>
      {svg}
    </document.body>;

    License

    MIT

    Install

    npm i jsx-dom-runtime

    DownloadsWeekly Downloads

    20

    Version

    0.17.2

    License

    MIT

    Unpacked Size

    37 kB

    Total Files

    11

    Last publish

    Collaborators

    • shoonia