0.0.4 • Published 4 years ago
react-configure v0.0.4
react-configure
Lightweight library to handle your React app static configs and feature-flags
This library lets you define:
- Static configurations like
backendUrl
; - Feature-flags like
enableChat
,enableCommentsSection
; - Multiple environments, each with its own configuration, like
dev
,qa
,prod
, etc.
It also selects which environment your application is running on based on:
1. Environment variable (REACT_APP_ENVIRONMENT
or STORYBOOK_ENVIRONMENT
);
2. Current hostname like;
-> If an environment variable is defined, the library will ignore the current hostname!
This way you only have to worry about importing your configs and using them. The library will select the right environment, configs and feature-flags for you.
Install
npm i --save react-configure
Setup
Using typescript
configuration.ts
interface EnvironmentConfigs {
backendUrl: string;
};
interface FeatureFlags {
enableChat: boolean;
};
const environments: Environments<EnvironmentConfigs, FeatureFlags> = {
'dev': {
name: 'Development',
hosts: [ 'localhost', 'dev.tmasantos.com' ],
configs: {
backendUrl: 'http://localhost:3030',
},
features: {
enableChat: true,
}
},
'prod': {
name: 'Production',
hosts: [ 'www.tmasantos.com', 'tmasantos.com' ],
configs: {
backendUrl: 'http://api.tmasantos.com',
},
features: {
enableChat: false,
}
}
};
const currentEnvironment = getCurrentEnvironment(
environments,
environments.prod,
);
export const FeatureFlag = currentEnvironment.FeatureFlag;
export const configs = currentEnvironment.configs;
export const features = currentEnvironment.features;
Usage
import React from 'react';
import { configs, FeatureFlag } from './configuration.ts';
console.log(`Current backend url is ${configs.backendUrl}`);
export const MyComponent = (): React.FC => (
<FeatureFlag flag="enableChat">
<p>Chat is enabled!</p>
</FeatureFlag>
);