# react-render-dependencies

> Resolves all given promises before rendering the children and providing them with the results

Latest version **0.0.1-rc1** (published 2019-10-18) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-render-dependencies
pnpm add react-render-dependencies
yarn add react-render-dependencies
bun add react-render-dependencies
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.1-rc1 |
| Published | 2019-10-18 |
| First published | 2019-10-18 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 17.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Vettiger, Linus |
| Maintainers | linschlager |

## Links

- npm: https://www.npmjs.com/package/react-render-dependencies
- Repository: https://github.com/Linschlager/react-dependencies
- npm.io page: https://npm.io/package/react-render-dependencies

## Recent versions

- 0.0.1-rc1 (latest) — 2019-10-18

## README

# react-dependencies
## Idea
The problem you will run into sooner or later is that when you create a page
that uses data from multiple sources, it will usually become somewhat jumpy
when new data comes in or when existing data changes.
This is where this component comes into play. You can define what has to happen
before the page can be displayed

## Concept
```typescript jsx
import React from 'react';
import { resolveMainSource } from 'main-source';
import ReactDependencies from 'react-dependencies'; 

const dependencies = [
  { required: true, label: "Main Data source", key: 'main', resolve: resolveMainSource },
  { required: false, label: "Some Option Dependency", key: "optional", resolve: async () => { return await 4+2 }}
];
const MyComponent = () => {
  return (
    <ReactDependencies dependencies={dependencies}>
    { ({ main, optional }) => {
      <ActualPage />
    } }
    </ReactDependencies>
);
}
```

---
_Source: https://npm.io/package/react-render-dependencies · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._