@layered-tree/react v1.0.0-dev.0

Welcome to @layered-tree/react 👋

✨ Introduction

A set of react helper to ease the usage of Layered-tree solution in react.

👷🏻‍♂️ Install

yarn add @layered-tree/react 

🛠 Usage

ℹ️ Before starting with @layered-tree/react please take the time to understand the @layered-tree/core concepts.

TODO: examples are coming

📚 API References:

HOC:

• HocProcessStrategy
• HocPluginRegister

Hooks:

• useProcessStrategy
• useProcessStrategyMemo
• usePluginRegister

HOC references:

A set of React Hight Order Component.

HocProcessStrategy:

Method

HocProcessStrategy<SS, SN, Props>(strategyAggregator: StrategyAggregator<SS>, strategyName: K): : (Component:  React.ComponentType<Props>): React.ComponentType<Props>

Function that takes in parameter a StrategyAggregator instance, and Strategy Name.

It return a HOC that will take in parameter directly a component, and process your strategies method with this one as src.

Avoid the possibility to pass data it's for simple layer. Useful to put strategy directly on a component definition

ℹ️ Strategy process is memoized, and will executed once.

⚠️ In case of Injection strategy the component will be passed as data to the strategy. And the definition of the component will take the defaultReturnValue of Injection strategy. This helper is more suitable for Pipeline strategy.

Type parameters

• SS: StrategyStorage

  

• SN: keyof SS

  

  Strategy Name

• Props: any

  

  Props of the component passed to the HOC.

Parameters

• strategyAggregator:

  • type: StrategyAggregator<SS>

  The StrategyAggregator that contain the Strategy to pick

• strategyName:

  • type: keyof SS | string

  The Strategy name to pick

Returns: HOC | (Component: React.ComponentType<Props>): React.ComponentType<Props>

HOC that process a component definition.

HocPluginRegister:

Method

HocPluginRegister<LT, Props>(layeredTree: LT): (Component:  React.ComponentType<Props>): React.ComponentType<Props & { plugins?: LayeredTreePlugin<LT>[] }>

Function that take in parameter a LayeredTree instance (mediator), and return a HOC that inject props plugins on a React component.

It register LayeredTreePlugin passed through this plugins props automatically in the passed LayeredTree instances (mediator).

ℹ️ The register process is memoized, so it will only done once except if plugins array ref change.

Type parameters

• LT: LayeredTree

  

• Props: any

  

  Props of the component passed to the HOC.

Parameters

• layeredTree:

  • type: LT | LayeredTree

  The LayeredTree instance that will receive plugins.

Returns: HOC | (Component: React.ComponentType<Props>): React.ComponentType<Props & { plugins?: LayeredTreePlugin<LT>[] }>

HOC that inject props plugins on the passed React component.

Hooks references:

A set of React Hooks.

useProcessStrategy:

Method

useProcessStrategy<SS, SN>(strategyAggregator: StrategyAggregator<SS>, strategyName: SN): (Anonymous function)

Function that take in parameter a StrategyAggregator instance, and Strategy Name.

It return a React Hook that will take in parameter directly any data and process your methods strategies.

Useful to attach a strategy during the life cycle of a component.

ℹ️ StrategyLayer (method) process is not memoized and will executed at each render.

Type parameters

• SS: StrategyStorage

  

• SN: keyof SS

  

  Strategy Name

Parameters

• strategyAggregator:

  • type: StrategyAggregator<SS>

  The StrategyAggregator that contain the Strategy to pick

• strategyName:

  • type: keyof SS | string

  The Strategy name to pick

Returns: Anonymous function

An anonymous function that take the exact param of the strategy process function and return its execution value

useProcessStrategyMemo:

Method

useProcessStrategy<SS, SN>(strategyAggregator: StrategyAggregator<SS>, strategyName: SN): (Anonymous function)

Function that take in parameter a StrategyAggregator instance, and Strategy Name.

It return a React Hook that will take in parameter directly any data and process your methods strategies.

Useful to attach a strategy during the life cycle of a component.

ℹ️ StrategyLayer (method) process is memoized and will executed once except if deps ref change.

Type parameters

• SS: StrategyStorage

  

• SN: keyof SS

  

  Strategy Name

Parameters

• strategyAggregator:

  • type: StrategyAggregator<SS>

  The StrategyAggregator that contain the Strategy to pick

• strategyName:

  • type: keyof SS | string

  The name associate to the Strategy to pick.

• deps:

  • type: Array<any>

    Array of dependencies surveyed to refresh the memoized StrategyLayer (method) processed.

Returns: Anonymous function

An anonymous function that take the exact param of the strategy process function and return its memoized processed return value

usePluginRegister:

Method

Function that take in parameter a LayeredTree instance (mediator), and return a React hook that take in parameter a LayeredTreePlugin Array.

It register those automatically in the passed LayeredTree instances (mediator).

ℹ️ The register process is memoized, so it will only done once except if plugins array ref change.

Type parameters

• LT: LayeredTree

  

usePluginRegister<LT, P>(layeredTree: LT): (plugins: LayeredTreePlugin[]): void

Parameters

• layeredTree:

  • type: LT | LayeredTree

  The LayeredTree instance that will receive plugins.

Returns: (plugins: LayeredTreePlugin[]): void

A React hook that take in parameter a LayeredTreePlugin Array and return void.

🤝 Contributing

Contributions, issues and feature requests are welcome!

Feel free to check issues page. You can also take a look at the contributing guide.

👤 Main Contributors

💚 Show your support

Give a ⭐️ if this project helped or interest you !

📝 License

This project is MIT licensed.