1.0.1 • Published 8 years ago
jodi-ui-components v1.0.1
JodiUI - Components
JodiUI Components extend JodiUI DOM with state and lifecycle callbacks.
Installation
npm install --save jodi-ui-components
Usage example
Simplest component would look like that:
import {el, text, render, s} from 'jodi-ui-dom';
import {component} from 'jodi-ui-components';
const myComponent = () => {
component('div', s({'class': 'my-component'})).render(() => {
el('span', () => text('Hello Jodi'));
});
};
Then use it wherever you need:
const node = document.querySelector('div.app');
render(node, () => {
el('h1', () => text('MyApp'));
myComponent();
});
Lifecycle callbacks
Lifecycle callbacks allow you to execute some code after component is rendered. There are 3 callbacks available:
whenCreated
- executed only after initial renderwhenUpdated
- executed when component is re-renderedwhenRendered
- executed after every render (both initial and update)
Usage:
import {el, text, render, s} from 'jodi-ui-dom';
import {component} from 'jodi-ui-components';
const myComponent = () => {
component('div', s({'class': 'my-component'}))
.whenCreated((element, state) => {console.log(`I'm created`, element, state);})
.whenUpdated((element, state) => {console.log(`I'm updated`, element, state);})
.whenRendered((element, state) => {console.log(`I'm rendered`, element, state);})
.render((state) => {
el('span', () => text('Hello Jodi'));
});
};
As you can see all lifecycle callbacks receive current DOM Node (element) and the state as arguments.
State
State lets you keep some data on component between updates. Although you are encouraged to store a state externally using stuff like e.g. Redux you may need to use Jodi's state. States are stored directly on DOM elements.
Usage:
// Assign a value to a key and execute the callback
state.set('key', 'value', () => {});
// Fetch a value
state.get('key', 'defaultValue');