FAQ

• How to return multiple children without unwanted wrapper from onRender?
• How to set the initial state of component?
• How to set the value of <textarea>?
• How to set the value of <select>?
• How to set the value of multi-value <select>?
• How to get updated value of multi-value <select> inside onChange handler?
• How to set arbitrary html coming from another system?
• How to use SVG, MathML?
• How to get underlying dom node?
• How to switch Vidom to production mode?

How to return multiple children without unwanted wrapper from onRender?

Just use fragment.

class MyComponent extends Component {
    onRender() {
        return node('fragment').setChildren([
            node(InnerComponent1),
            node(InnerComponent2)
        ]);
    }
}

in JSX:

class MyComponent extends Component {
    onRender() {
        return (
            <fragment>
                <InnerComponent1/>
                <InnerComponent2/>
            </fragment>
        );
    }
}

How to set the initial state of component?

Call setState inside onInit lifecycle method.

class MyComponent extends Component {
    onInit() {
        this.setState({ prop : 'val' });
    }
}

How to set the value of <textarea>?

Vidom supports the only way to set the value of <textarea> — via value attribute. Don't try to set the value using children.

node('textarea').setAttrs({ value : 'content of textarea' });

in JSX:

<textarea value="content of textarea"/>

How to set the value of <select>?

Vidom supports the only way to set the value of <select> — via value attribute. Don't try to use selectedIndex attribute or set selected attribute of <option>.

node('select').setAttrs({ value : 2 }).setChildren([
    node('option').setAttrs({ value : 1 }),
    node('option').setAttrs({ value : 2 }) // this option will be selected
]);

in JSX:

<select value="2">
    <option value="1"/>
    <option value="2"/> // this option will be selected
</select>

How to set the value of multi-value <select>?

Just set multiple attribute to true and use an array in value attribute.

node('select')
    .setAttrs({ multiple : true, value : ['2', '3'] })
    .setChildren([
        node('option').setAttrs({ value : '1' }),
        node('option').setAttrs({ value : '2' }), // this option will be selected
        node('option').setAttrs({ value : '3' }) // this option will be selected
    ]);

in JSX:

<select multiple value={ ['2', '3'] }>
    <option value="1"/>
    <option value="2"/> // this option will be selected
    <option value="3"/> // this option will be selected
</select>

How to get updated value of multi-value <select> inside onChange handler?

Use second argument of onChange handler.

node('select')
    .setAttrs({
        multiple : true,
        value : ['2', '3'],
        onChange : (e, value) => {
            console.log(value);
        }
    })
    .setChildren([
        node('option').setAttrs({ value : '1' }),
        node('option').setAttrs({ value : '2' }),
        node('option').setAttrs({ value : '3' })
    ]);

in JSX:

<select multiple value={ ['2', '3'] } onChange={ (e, value) => { console.log(value); } }>
    <option value="1"/>
    <option value="2"/>
    <option value="3"/>
</select>

How to set arbitrary html coming from another system?

Use setHtml method of TagNode.

node('div').setHtml('<p class="para">some text<br/>another text</p>');

in JSX:

<div html={ '<p class="para">some text<br/>another text</p>' }/>

How to use SVG, MathML?

Just specify corresponding namespace in <svg>/<math> element.

node('svg')
    .setNs('http://www.w3.org/2000/svg')
    .setChildren([
        node('path').setAttrs({ fill : '#fc0', d : 'M3 19h14v19h-14z' }),
        node('path').setAttrs({ fill : '#e4b702', d : 'M17 19h18v19h-18z' }),
        node('path').setAttrs({ fill : '#333', d : 'M13 7v12h25l-12-12h-13z' }),
        node('path').setAttrs({ fill : '#666', d : 'M12 7l-12 12h14l12-12h-14z' })
    ]);

in JSX:

<svg xmlns="http://www.w3.org/2000/svg">
    <path fill="#fc0" d="M3 19h14v19h-14z"/>
    <path fill="#e4b702" d="M17 19h18v19h-18z"/>
    <path fill="#333" d="M13 7v12h25l-12-12h-13z"/>
    <path fill="#666" d="M12 7l-12 12h14l12-12h-14z"/>
</svg>

How to get underlying dom node?

Use referencies.

import { node, mount } from 'vidom';

let inputDomNode;

mount(
    document.body,
    node('div')
        .setAttrs({ className : 'input' })
        .setChildren(
            node('input')
                .setRef(domNode => { inputDomNode = domNode; })
                .setAttrs({ className : 'input__control' })),
    () => {
        inputDomNode.focus();
    });

in JSX:

import { mount } from 'vidom';

let inputDomNode;

mount(
    document.body,
    <div class="input">
        <input ref={ domNode => { inputDomNode = domNode; } } class="input__control"/>
    </div>,
    () => {
        inputDomNode.focus();
    });

How to switch Vidom to production mode?

By default Vidom works in dev mode. It has a lot of checks to help developers avoid common mistakes. But they may affect performance of your applications. For this reason Vidom has production mode without any checks. To switch Vidom to production mode, set the environment variable NODE_ENV to production during your build step. It's also recommended to use such tools as envify and UglifyJS to completely eliminate the extra code presented in dev mode.

If you're using CDN, just switch script source to the minified version:

<script src="https://cdnjs.cloudflare.com/ajax/libs/vidom/0.9.6/vidom.min.js"></script>

or

<script src="https://unpkg.com/vidom@0.9.6/dist/vidom.min.js"></script>