react-resource

React component to provide loading content from configuration. This allows for site content to be swapped at run time, which is useful for supporting multiple languages and making the site more themable.

Usage

Configure / Render

import Configuration from 'configuration';
import Resource from 'react-resource';

// Load Resources Into Global Configuration
Configuration.global.load( {
    'resource.someText': 'Test',
    'resource.someImage':  (
        <svg>
            <text x="0" y="35" fontFamily="Verdana" fontSize="35">
                Test
            </text>
        </svg>
    )
} );

// Render some text setup in configuration
<Resource name='resource.someText' />

// Render some image setup in configuration
<Resource name='resource.someImage' />

Default Values

When a resource name is not configured in the global configuration, a child component can be supplied to serve as a default.

import Resource from 'react-resource';

// Render some text that is not setup in configuration
<Resource name='resource.someText'>
    Some Default Value
</Resource>

// Render some image that is not setup in configuration
<Resource name='resource.someImage' >
    <svg>
        <text x="0" y="35" fontFamily="Verdana" fontSize="35">
            Some Default Value
        </text>
    </svg>
</Resource>

Parameters

The resource component allows resources to be configured as template literals or functions. Parameters can then be supplied via the params prop.

import Configuration from 'configuration';
import Resource from 'react-resource';

// Load Resources Into Global Configuration
Configuration.global.load( {
    'resource.someText': 'Test ${ someValue }',
    'resource.someImage': ( props ) =>
        <svg>
            <text x="0" y="35" fontFamily="Verdana" fontSize="35">
                Test { props.someValue }
            </text>
        </svg>
} );

// Render some text setup in configuration
<Resource name='resource.someText' params={ someValue: "123" } />

// Render some image setup in configuration
<Resource name='resource.someImage' params={ someValue: "123" } />