create_component.md

Basics

Create react component with context.

React Component has system called context.

What is context?

Context is system which share common function, properties and etc...
Context was unlike props, do not need pass through children components. To share context, simply define context value at the root component
and if you want to use context properties,
you simply add some required properties to child component.

In rxx

rxx use context system as well.
rxx context has some useful function or properties.

How do you create component which has context?

The component which has created from Provider has root context,
so, only you need is create child component with context decorator function of rxx/core.

Exmaples

import {
  context,
  ProviderContextType
} from '@rxx/core';

export interface Props {
  ...
}

@context
class Component extends React.Component<Props, {}> {
  public context: ProviderContextType<{}>;

  render() {
    ...
  }
}

or

import {
  view,
  ProviderContextType
} from '@rxx/core';

export interface Props {
  ...
}

const Component = view((props: Props, context: ProviderContextType<{}>) => {
    return ...
}, 'Component');

It is easy, isn't it?
view function accept two argument type.
First is function that is return React Component and this function called by props and context.
Second is class that extends React Component and that class has props and context in instance properties.

That's all!

Oh, forgot one thing, The last arguments of view function is component name.
What is component name?
React component has name which named by function.name or displayName property. The view function add displayName to your component to easy to debug.