Opinionated, extensible React applications framework
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.
yarn add @globality/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,
});
});
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
: thebottle-js
service containeronReady
: 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 objectremoteConfigs
: remote configuration loader options (more about this below)
Currently, there are a few included plug-ins:
ConfigurationPlugin
- Loads configuration from remote URLs and localStorageHistoryPlugin
- Creates ahistory/createBrowserHistory
instanceIntlPlugin
- Wraps the app in anIntlProvider
HoC fromreact-intl
ReduxPlugin
- Creates aredux
instance
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:
- Environment: Passing a
config
object in theenvironment
property will create a default configuration - Remote: Loaded from one or more remote JSON files
- 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)
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'],
},
}
- Use React 16.3's Context API for providers.