A Higher Order Component that provides configuration (from context & defaults) as props.

Preconf is just 400 bytes and works well with preact-context-provider.

Usage

import preconf from 'preconf';
import Provider from 'preact-context-provider';

// generally from an import
const defaults = {
	greeting: 'hello'
};

let configure = preconf(null, defaults);

/** Wire two configuration fields up to props: */
@configure('greeting, name')
class Foo extends Component {
	render({ greeting, name }) {
		return <span>{greeting}, {name}</span>
	}
}

/** Render from defaults: */
render(<Foo />);
// <span>hello, </span>

/** Provide overrides as `context.config`: */
render(
	<Provider config={{ name: 'Stan' }}>
		<Foo />
	</Provider>
);
// <span>hello, Stan</span>

API

Table of Contents

• preconf
  • Parameters
  • Examples
  • configure
    • Parameters

preconf

Creates a higher order component that provides values from configuration as props.

Parameters

• namespace String? If provided, exposes defaults under a namespace
• defaults Object? An object containing default configuration values

Examples

Decorate a component without any namespace or defaults

let configure = preconf();
export const MyConfiguredComponent = configure({ a: 'a' })(MyComponent);

MyConfiguredComponent.getWrappedComponent() === MyComponent; // true

Decorate a component without a namespace and using defaults

let configure = preconf(null, { url:'//foo.com' });
export default configure({ url: 'url' })( props =>
	<a href={props.url} />
);

Decorate a component with weather namespace and using defaults

let configure = preconf('weather', { url:'//foo.com' });
export default configure({
	url: 'weather.url'
})( ({ url }) =>
	<a href={props.url} />
);

Returns Function configure()

configure

Creates a Higher Order Component (HOC) that provides configuration as props.

Parameters

• keys (Object | Array<String>) An object where the keys are prop names to pass down and values are dot-notated keypaths corresponding to values in configuration. If a string or array, prop names are inferred from configuration keys.

Returns Function configureComponent(Component) -> Component. The resulting HOC has a method getWrappedComponent() that returns the Child that was wrapped

License