ontime-connect v1.0.0

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