npm package: @layered-tree/react
Description: @layered-tree/react is a set of react helper to ease the usage of layered-tree solution in react.
Author: Nicolas Ribes
Latest version: 1.0.0-dev.0
Deprecated: only

<div align="center">
    <a href="https://github.com/easyni/layered-tree">
        <img width="200" height="200" src="https://raw.githubusercontent.com/easyni/layered-tree/master/.github/logo-layered-tree.svg">
  </a>
  <a href="https://github.com/facebook/react">
    <img width="200" height="200"
      src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii0xMS41IC0xMC4yMzE3NCAyMyAyMC40NjM0OCI+CiAgPHRpdGxlPlJlYWN0IExvZ288L3RpdGxlPgogIDxjaXJjbGUgY3g9IjAiIGN5PSIwIiByPSIyLjA1IiBmaWxsPSIjNjFkYWZiIi8+CiAgPGcgc3Ryb2tlPSIjNjFkYWZiIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiPgogICAgPGVsbGlwc2Ugcng9IjExIiByeT0iNC4yIi8+CiAgICA8ZWxsaXBzZSByeD0iMTEiIHJ5PSI0LjIiIHRyYW5zZm9ybT0icm90YXRlKDYwKSIvPgogICAgPGVsbGlwc2Ugcng9IjExIiByeT0iNC4yIiB0cmFuc2Zvcm09InJvdGF0ZSgxMjApIi8+CiAgPC9nPgo8L3N2Zz4K">
  </a>
</div>

[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/easyni/layered-tree/blob/ci/setup/packages/react/LICENCE)
[![npm version](https://badge.fury.io/js/%layered-tree%2Freact.svg)](https://npmjs.com/@layered-tree/react)
![build](https://github.com/easyni/layered-tree/workflows/build/badge.svg)
![test](https://github.com/easyni/layered-tree/workflows/test/badge.svg)

# Welcome to @layered-tree/react 👋

## ✨ Introduction

A set of react helper to ease the usage of [Layered-tree](../core/README.md) solution in react.

## 👷🏻‍♂️<a name="install"></a> Install

```bash
yarn add @layered-tree/react 
```
## <a name="usage"></a> 🛠 Usage

> ℹ️ Before starting with `@layered-tree/react`  please take the time to understand the [@layered-tree/core](../core/README.md) concepts.

TODO: examples are coming

## <a name="ref"></a> 📚 API References:

[HOC:](#hoc-references)
- [HocProcessStrategy](#strategyaggregator)
- [HocPluginRegister](#hocpluginregister)

[Hooks:](#hooks-references)
- [useProcessStrategy](#useprocessstrategy)
- [useProcessStrategyMemo](#useprocessstrategymemo)
- [usePluginRegister](#usepluginregister)

---
### HOC references:

A set of React [Hight Order Component](https://reactjs.org/docs/higher-order-components.html).

---

#### HocProcessStrategy: 
![Contributor](https://img.shields.io/badge/Implementation_side-Contributor-73ADFF?style=flat-square)

**Method** 

```ts
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](../core/README.md#injection) strategy the component will be passed as data to the strategy. And the definition of the component will take the **defaultReturnValue** of [Injection](../core/README.md#injection) strategy. This helper is more suitable for [Pipeline](../core/README.md#pipeline) strategy.



**Type parameters**
  - **SS**: `StrategyStorage`
    
    ![Optionnal](https://img.shields.io/badge/Inferred-Optionnal-informational?style=flat-square)
    
  - **SN**: `keyof SS`
    
    ![Optionnal](https://img.shields.io/badge/Inferred-Optionnal-informational?style=flat-square)

    Strategy Name
  - **Props**: [`any`](../core/README.md#layeredtree)
    
    ![Optionnal](https://img.shields.io/badge/Inferred-Optionnal-informational?style=flat-square)

    **Props** of the component passed to the HOC. 

***Parameters***
  - **strategyAggregator**: 
    - type: [`StrategyAggregator<SS>`](../core/README.md#strategyaggregator)

    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: 
![Contributor](https://img.shields.io/badge/Implementation_side-Contributor-73ADFF?style=flat-square)

**Method** 

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

Function that take in parameter a [LayeredTree](../core/README.md#layeredtree) instance (mediator), and return a HOC that inject props `plugins` on a React component.

It register [LayeredTreePlugin](../core/README.md#layeredtreeplugin) passed through this `plugins` props automatically in the passed [LayeredTree](../core/README.md#layeredtree) instances (mediator). 

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


**Type parameters**
  - **LT**: [`LayeredTree`](../core/README.md#layeredtree)
    
    ![Optionnal](https://img.shields.io/badge/Inferred-Optionnal-informational?style=flat-square)
     
  - **Props**: `any`
    
    ![Optionnal](https://img.shields.io/badge/Inferred-Optionnal-informational?style=flat-square)

    **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](https://reactjs.org/docs/hooks-intro.html).

---

#### useProcessStrategy: 
![Contributor](https://img.shields.io/badge/Implementation_side-Contributor-73ADFF?style=flat-square)

**Method** 

```ts
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`
    
    ![Optionnal](https://img.shields.io/badge/Inferred-Optionnal-informational?style=flat-square)
    
  - **SN**: `keyof SS`
    
    ![Optionnal](https://img.shields.io/badge/Inferred-Optionnal-informational?style=flat-square)

    Strategy Name


***Parameters***
  - **strategyAggregator**: 
    - type: [`StrategyAggregator<SS>`](../core/README.md#strategyaggregator)

    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: 
![Contributor](https://img.shields.io/badge/Implementation_side-Contributor-73ADFF?style=flat-square)

**Method** 

```ts
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`
    
    ![Optionnal](https://img.shields.io/badge/Inferred-Optionnal-informational?style=flat-square)
    
  - **SN**: `keyof SS`
    
    ![Optionnal](https://img.shields.io/badge/Inferred-Optionnal-informational?style=flat-square)

    Strategy Name


***Parameters***
  - **strategyAggregator**: 
    - type: [`StrategyAggregator<SS>`](../core/README.md#strategyaggregator)

   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: 
![Contributor](https://img.shields.io/badge/Implementation_side-Contributor-73ADFF?style=flat-square)

**Method** 

Function that take in parameter a LayeredTree instance (mediator), and return a React hook that take in parameter a [LayeredTreePlugin](../core/README.md#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`](../core/README.md#layeredtree)
    
    ![Optionnal](https://img.shields.io/badge/Inferred-Optionnal-informational?style=flat-square)
     
```ts
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](../core/README.md#layeredtreeplugin) Array and return `void`.

---

## <a name="contrib"></a> 🤝 Contributing
Contributions, issues and feature requests are welcome!

Feel free to check [issues page](https://github.com/easyni/layered-tree/issues). You can also take a look at the [contributing guide](../../CONTRIBUTING.md).

## 👤 Main Contributors
| <a href="https://github.com/easyni" target="_blank"><img src="https://avatars1.githubusercontent.com/u/8232893?s=460&u=88d421f642f6458ab07bf0c22a3a65c61334d5ec&v=4"></a><br>**Nicolas Ribes** <br> * Github: [@easyni](https://github.com/easyni) <br> *Author* |
| :------: |

## <a name="support"></a> 💚 Show your support

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

## <a name="license"></a> 📝 License

This project is [MIT](./LICENCE) licensed.