@deboxsoft/react-config

React config

Installation

$ npm install @deboxsoft/react-config

API

set( configuration [, options] )

import config from '@deboxsoft/react-config';

config.set({ 
    foo: 'bar',
    bar: {
        baz: 'qux'
    },
    baz: ['qux']
});

• configuration whatever you want to be made available when subsequently importing / requiring get function @deboxsoft/react-config.
• options object optionally containing the following:
  • options.freeze default: true - used to prevent the freezing of the configuration object.
  • options.assign default: false - causes the passed configuration object to have its properties assigned to the existing configuration, rather than replacing it.

get( [key], [default] )

import config from '@deboxsoft/react-config';

config.get('foo'); //'bar'
config.get('bar'); //{ baz: 'qux' }
config.get('bar.baz'); //'qux'
config.get('baz'); //['qux']
config.get('baz.0'); //'qux'

• key key to the setting you want to recover. If you do not put this key you recover all settings.
• default default value if not exists the setting with the specified key. If you do not put this parameter you get null value by default.

serialize()

import config from '@deboxsoft/react-config';

config.serialize(); //"{foo:'bar',bar:{baz:'qux'},baz:['qux']}"

Serialize configuration to a superset of JSON.

reset()

import reset from '@deboxsoft/react-config/reset';

reset();

This is a testing utility that removes the existing configuration from the require cache. By calling this, calling config.set(configuration) and then re-requiring any target file, that target file will then be returned from require with the new configuration applied.

Example Usage

Server Side

config.js (global configuration file)

const config = {
    foo: 'bar' 
};

export default config;

server.js (initiation of server side process)

import config from '@deboxsoft/react-config';
import configuration from './config';
import App from './app';

config.set(configuration);

new App();

render.js (render of server side process)

import config from 'react-config';

export renderScripts = () => 
    `
        <script>
            window.__INITIAL_CONFIG__ = ${config.serialize()};
        </script>
    `;

Client Side

client.js (initiation of client side js, assume compiled via browserify / webpack / similar)

import React from 'react';
import config from '@deboxsoft/react-config';
import App from './app';

(function clientJS() {
    config.set(window.__INITIAL_CONFIG__);
    React.render(<App/>, document);
}());

React

component.js (somewhere inside the client side app)

import React from 'react';
import config from 'react-config';

class Component extends React.Component {
    render() {
        return (
            <div>{ config.get('foo') }</div>
        );
    }
};

export default Component;

Testing

appLogic.test.js

import reset from '@deboxsoft/react-config/reset';
import assert from 'assert';

describe('appLogic', () => {
    it('should return foo from configuration', () => {
        import config from '@deboxsoft/react-config';
    
        const foos = [ 'alpha', 'beta', 'gamma' ];
        foos.forEach((foo) => {
            // This only works because `freeze: false` was set the first time set was called (in gulp/test.js).
            config.set({ foo: foo });
            const appLogic = require('./appLogic');
            assert(appLogic() === foo);
        });
    });

    afterEach(() => {
        reset();
    });
});

Thanks

React global configuration was initially inspired by global-configuration. Many thanks to Josh-a-e.