https://github.com/loadsmart/react-frontend-settings
https://github.com/loadsmart/react-frontend-settings
Last synced: about 1 year ago
JSON representation
- Host: GitHub
- URL: https://github.com/loadsmart/react-frontend-settings
- Owner: loadsmart
- Created: 2021-07-02T20:35:27.000Z (almost 5 years ago)
- Default Branch: main
- Last Pushed: 2024-07-31T18:09:10.000Z (almost 2 years ago)
- Last Synced: 2025-05-26T19:49:22.286Z (about 1 year ago)
- Language: TypeScript
- Size: 315 KB
- Stars: 0
- Watchers: 59
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: readme.md
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project
README
# React Frontend Settings
Dynamic frontend settings for React applications.
This application is meant to be used together with [django-frontend-settings](https://github.com/loadsmart/django-frontend-settings)
or some other settings provider. The most important part is that the `getSettings` function must return a `Promise` which will resolve
to a json object like:
```json
{
"settings": {
"GOOGLE_MAPS_KEY": "abcd1234",
"SOME_OTHER_SETTING": 123
},
"flags": {
"ENABLE_FEATURE_AAA": true,
"ENABLE_FEATURE_BBB": false
}
}
```
## Usage/Examples
You will need to wrap your application with the `SettingsProvider` component, like this:
```javascript
import { SettingsProvider } from '@loadsmart/react-frontend-settings'
function getSettings() {
return http.get('/api/frontend-settings')
}
function App() {
return (
Loading}>
{/* ... */}
)
}
```
The provider accepts options as well:
- updateIntervalMs: the interval to refetch the settings in ms, default: 10 minutes.
- onGetSettingsFail: how to handle an error when fetching the settings, accepts two values:
- `keep-last`: if the request fail, keep the last known value.
- `reset`: if the request fail, revert to the inital (empty) value.
After that you can use the hooks/hocs provided by the library:
### useSettings
```javascript
function AddressInput({ ...props }) {
const {
values: [gmapsKey],
isLoading,
} = useSettings(['settings.GOOGLE_MAPS_KEY']);
const gMapsStaus = useScript(gmapsKey ? scriptUrl(gmapsKey) : '');
if (isLoading) return null;
return ;
}
```
### withSettings
```javascript
function AddressInput({ gmapsKey, allowedCountries, ...props }) {
const country = allowedCountries?.split(',') || 'us';
const gMapsStaus = useScript(gmapsKey ? scriptUrl(gmapsKey) : '');
return ;
}
const options = {
settingsMap: {
gmapsKey: 'settings.GOOGLE_MAPS_KEY',
allowedCountries: 'settings.ALLOWED_COUNTRIES',
},
loadingComponent: Loading,
};
export default withSettings(AddressInput, options);
```
### withFeatureFlag
```javascript
function ComponentV1() {
return V1;
}
function ComponentV2() {
return V2;
}
export default withFeatureFlag(ComponentV2, {
flags: ['flags.ENABLE_COMPONENT_V1'],
fallbackComponent: ComponentV1,
});
```