What is an Ontime Component? There are the Decorator and Store, who are able to help you not to use complex functionality as Redux or MobX. Sometimes there is a need for small and simple functionality that covers the same functionality form Redux or MobX.

The store is used to help you manage application state container.

Decorator @Connect is used to react to changes in Store.

Below you are able to find example how to use.

npm install ontime-connect

// File store.ts
import { Store } from 'ontime-connect';

interface IUserStore extends {
  name: string;
  email: string;
}

const store = new Store<IUserStore>({
  name: '', 
  email: ''
});

export {
  store,
  IUserStore
};

// File UserComponent.ts
import React, { Component } from 'react';
import { Connect } from 'ontime-connect';
import { store, IUserStore } from './store.ts';

interface ITestProps {
  name?: string;
  email?: string;
}

interface ITestDefProps extends ITestProps {
  name: string;
  email: string;
}

@Connect<IUserStore>(store, ['name', 'email'])
class UserComponent extends Component<ITestProps & ITestDefProps> {

  public static defaultProps: ITestDefProps = {
    name: '',
    email: ''
  };

  render(): JSX.Element {
    const { name, email } = this.props;

    if (name && !email) {
      return (<span>{ name }</span>);
    } else if (name && email) {
      return (<span>{ name } ({ email })</span>);
    } else {
      return (<span>Unknown user</span>);
    }
  }

}

set(name: keyof P, value: P[keyof P]): void Set a new value to store

where "P" is generic interface of properties

get(name: keyof P): P[keyof P] get value by name from store

Connect<P>(store: Store<P>, propsName: string[]) create connection from component to store

P - generic interface of properties

store - instance of class Store

propsName - list of properties names to react on changes