Environment Provider
HOC that provides the environment
object to its children if given either an environmentId
or a hostname
. Attempts to use Next.js
getInitialProps
.
Installation
npm install @agderposten/environment-provider
Usage
Preferably use this HOC only once and on the root component.
import React from 'react';
import environmentProvider from '@agderposten/environment-provider';
export default () => environmentProvider({
environmentId: '4d63d444-d418-4981-8c0e-f5d26ea334db'
}, ({environment}) => (
<div>{environment.name}</div>
));
// ... or:
export default () => environmentProvider({
hostname: 'agderposten.no'
}, ({environment}) => (
<div>{environment.name}</div>
));
// ... or implicit, where it tries to read the current hostname
export default () => environmentProvider(({environment}) => (
<div>{environment.name}</div>
));
Override the implicit hostname by providing it through query string with key __hostname__
: ?__hostname__=agderposten.no
.
You can also provide an optional LoaderComponent
as the last function argument that will be rendered when loading environment information:
export default () => environmentProvider({
environmentId: '4d63d444-d418-4981-8c0e-f5d26ea334db'
}, ({environment}) => (
<div>{environment.name}</div>
), () => (
<div>Loading environment information...</div>
));
environment
The environment
object looks something like this:
{
id: '4d63d444-d418-4981-8c0e-f5d26ea334db',
name: 'Agderposten',
code: 'AG',
color: '#1a6cbb',
locale: 'nb-NO',
urls: {
home: 'http://www.agderposten.no',
user: 'https://les.agderposten.no',
paywall: 'http://www.agderposten.no/kjop-tilgang',
login: 'https://les.agderposten.no/logg-inn',
registration: 'https://les.agderposten.no/registrering'
},
images: {
favicon: 'https://api.agderposten.no/static/8105276e-4493-4b3c-8aa6-e99514a16a17.png',
logo: {
white: 'https://api.agderposten.no/static/49bc22fc-64a2-4abc-abea-778909f1c6d9.png',
black: 'https://api.agderposten.no/static/9b476c35-64fa-4254-8d39-7b43c189ecf2.png'
}
}
}
Encountering an error, the environment
object is given an error
property:
{
error: {
code: 'unable_to_fetch',
message: 'Unable to fetch.'
}
}