# @acoustic-content-sdk/react-utils

> Collection of utility methods to efficiently create react components and modules.

Latest version **9.0.10076** (published 2020-03-26) · MIT license · 0 weekly downloads

## Install

```sh
npm install @acoustic-content-sdk/react-utils
pnpm add @acoustic-content-sdk/react-utils
yarn add @acoustic-content-sdk/react-utils
bun add @acoustic-content-sdk/react-utils
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 9.0.10076 |
| Published | 2020-03-26 |
| First published | 2019-11-26 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 834.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Carsten Leue |
| Maintainers | carstenleue, daherbst, jim.patrick, joe.john, kevintap, mburati, neelkanthpatel, orenaksakal |
| Keywords | acoustic, acoustic-content, react, sdk |

## Links

- npm: https://www.npmjs.com/package/@acoustic-content-sdk/react-utils
- npm.io page: https://npm.io/package/@acoustic-content-sdk/react-utils

## Dependencies (3)

- [@acoustic-content-sdk/api](https://npm.io/package/@acoustic-content-sdk/api.md) 9.0.10076
- [@acoustic-content-sdk/utils](https://npm.io/package/@acoustic-content-sdk/utils.md) 9.0.10076
- [@acoustic-content-sdk/edit-api](https://npm.io/package/@acoustic-content-sdk/edit-api.md) 9.0.10076

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 9.0.10076 (latest) — 2020-03-26
- 8.0.498 (beta) — 2019-11-30
- 9.0.10067 — 2020-03-25
- 9.0.10040 — 2020-03-20
- 9.0.10034 — 2020-03-20
- 9.0.495 — 2020-03-09
- 9.0.493 — 2020-03-08
- 9.0.462 — 2020-03-05
- 9.0.407 — 2020-02-28
- 9.0.384 — 2020-02-25
- 9.0.361 — 2020-02-21
- 9.0.360 — 2020-02-21
- 9.0.271 — 2020-02-11
- 9.0.251 — 2020-02-07
- 9.0.242 — 2020-02-06
- … 6 more at https://npm.io/package/@acoustic-content-sdk/react-utils/versions

## README

[![npm](https://img.shields.io/npm/v/@acoustic-content-sdk/react-api.svg?style=flat-square)](https://www.npmjs.com/package/@acoustic-content-sdk/react-api)

## Documentation

[API Documentation](./markdown/react-api.md)

## Code Splitting

Support for `ReactModule`s for React components that implement transparent lazy loading, e.g. using [ES6 code splitting](https://webpack.js.org/guides/code-splitting/).

Use the `createLazyComponent` method to convert an asynchronous component creation function (e.g. via lazy loading) into a synchronous creation function. The component created by the synchronous function will be available immediately but it will only load the one from the asynchronous callback when actually being rendered.

This approach can e.g. be used to provide a lazy loaded component module in a way that the consumer of the module does not see a difference between lazy loading vs eager loading. The decision to use lazy loading/code splitting lies therefore in the scope of the module provider not the module consumer.

### Example

`component.ts`:

Constructor function for a [React](https://reactjs.org/docs/react-component.html) component:

```typescript
export const createMyComponent([store]: [ReduxStore], [logSvc?]: [LoggerService]): ReactComponent<SomeState> => ...
```

`lazy.component.ts`:

A creation function of a component with the identical interface but lazy loaded via code splitting can be created like so:

```typescript
export const createMyLazyComponent = createLazyComponent(
  defer(() => import('./component')).pipe(pluck('createMyComponent'))
);
```

Note that both `createMyComponent` and `createMyLazyComponent` share the identical interface, the can both be used to define a `ReactModule` for same component. This lets the application decide to use lazy loading when applicable, without any code changes for either the provider not the consumer of the component.

---
_Source: https://npm.io/package/@acoustic-content-sdk/react-utils · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._