ayvar v0.2.1

Example

import Ayvar from 'ayvar';

const App = (props, { state, setState }) => {
  const { count = props.initCount } = state;

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={down}>-</button>
      <button onClick={up}>+</button>
    </div>
  );

  function down() {
    setState({ count: count - 1 });
  }

  function up() {
    setState({ count: count + 1 });
  }
};

Ayvar.render(<App initCount={0} />, document.getElementById('app'));

Stateless Component

const Hello = props => <h1>Hello, {props.name}</h1>;

• props: The props that were defined by the caller of this component.

Stateful Component

const Counter = (props, { state, setState }) => {
  const { count = 0 } = state;

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={increment}>+</button>
    </div>
  );

  function increment() {
    setState({ count: count + 1 });
  }
};

• state: The state contains data specific to this component that may change over time.
• setState: Used to update state and user interface.

Component Lifecycle

const Clock = (props, { state, setState, self: clock }) => {
  const { date = new Date() } = state;

  clock.onCreate = () => {
    clock.timerID = setInterval(tick, 1000);
  };

  clock.onDestroy = () => {
    clearInterval(clock.timerID);
  };

  return (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {date.toLocaleTimeString()}</h2>
    </div>
  );

  function tick() {
    setState({
      date: new Date()
    });
  }
};

• onCreate: This event is fired after the component is created and attached to the DOM.
• onUpdate: This event is fired every time the component is updated. Previous props are being passed to the handler.
• onDestroy: This event is fired when the component is removed from the DOM.

Installation

License

Ayvar is MIT licensed. See LICENCE.