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 return an array

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

or use <fragment>.

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.

<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>.

<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.

<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.

<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 html property.

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

How to use SVG, MathML?

Just use it, Vidom automatically adds necessary namespaces.

<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 { 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://unpkg.com/[email protected]/dist/vidom.min.js"></script>