react-render-dependencies

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

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>
);
}