@globality/poco

Opinionated, extensible React applications framework

Stats

stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
@globality/poco
Minified + gzip package size for @globality/poco in KB

Readme

poco

Opinionated, extensible React applications framework

What is poco

Poco is a React application framework, that aims to make it easy to create applications with pre loaded services like redux, apollo client, remote configurations, etc.

Installation

yarn add @globality/poco

How to use poco

The following is an app that uses redux and react-intl.

import Poco, { IntlPlugin, ReduxPlugin } from '@globality/poco';

const App = new Poco({
    appName: 'my-app',
    createApp: () => <div>Hello world!</div>,
});

App.load((app) => {
    app.addPlugin(IntlPlugin);
    app.addPlugin(ReduxPlugin, {
        rootReducer: state => state,
    });
});

Constructor

Poco receives an object with the following properties:

  • appName (string, required)

    Application name, is used by the plugins (i.e. to determine where to load or save configuration)

  • createApp (function, required)

    Function that returns the React component that holds the application. It receives an object with:

    • container: the bottle-js service container
    • onReady: function that must be called whenever the app is ready to be shown to the user, this allows the app to load data before rendering
  • environment (object)

    Object containing basic environment configuration:

    • config: configuration object that contains the default values. Remote configurations (if enabled) will be merged into this object
    • remoteConfigs: remote configuration loader options (more about this below)

Plugins

Currently, there are a few included plug-ins:

  • ConfigurationPlugin - Loads configuration from remote URLs and localStorage
  • HistoryPlugin - Creates a history/createBrowserHistory instance
  • IntlPlugin - Wraps the app in an IntlProvider HoC from react-intl
  • ReduxPlugin - Creates a redux instance

Remote configuration

The ConfigurationPlugin is loaded by default when load() is called, and uses 3 sources for loading configuration that can be used by other plugins or in your app.

The 3 sources are:

  1. Environment: Passing a config object in the environment property will create a default configuration
  2. Remote: Loaded from one or more remote JSON files
  3. localStorage: Loaded from the browser's localStorage, intended for feature flags and session state

The different sources are loaded and merged in this order, in other words: _.merge({}, environmentConfig, remoteConfig, localConfig)

Setup

In order to load configuration from remote sources, you need to pass a remoteConfigs object to the environment property:

environment: {
    remoteConfigs: {
        enabled: true,
        origin: 'https://example.com',
        paths: ['/configs/my-app.json', '/configs/common.json'],
    },
}

TODO

  • Use React 16.3's Context API for providers.

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.