react-remote-config-context
v1.0.1
Published
Lightweight React/React Native library that provides a typed, schema-validated interface to Firebase Remote Config through React Context.
Downloads
9
Maintainers
ulyssesrrReadme
react-remote-config-context
Lightweight React/React Native library that provides a typed, schema-validated interface to Firebase Remote Config through React Context.
Installation
npm install react-remote-config-contextUsage
React (Web)
See complete example
Install firebase (see complete docs)
npm install firebaseimport { initializeApp } from "firebase/app";
import { booleanType, createSchema, numberType, stringType, type ConfigEntry } from 'react-remote-config-context/firebase-schema';
import { createWebFirebaseAdapter } from 'react-remote-config-context/web';
import { createFirebaseRemoteConfigContext } from 'react-remote-config-context/context';
// define config schema and default values
const configSchema = createSchema({
maxValue: numberType(30),
helloMessage: stringType('Hello from Default Value'),
featureFlag: booleanType(false),
limit: numberType(),
});
const firebaseConfig = {
// your firebase config
};
// Initialize Firebase
initializeApp(firebaseConfig);
// create context adapter
const webFirebaseAdapter = createWebFirebaseAdapter(configSchema);
// create context
const { RemoteConfigProvider, useRemoteConfig } =
createFirebaseRemoteConfigContext(webFirebaseAdapter);
function App() {
// wrap components with RemoteConfigProvider
return (
<RemoteConfigProvider adapter={webFirebaseAdapter}>
<Content/>
</RemoteConfigProvider>
)
}
function Content() {
// get config
const config = useRemoteConfig();
return (
<>
<table>
<thead>
<tr>
<th>Key</th>
<th>Source</th>
<th>Value</th>
</tr>
</thead>
<tbody>
{Object.entries(config.entries).map(([configKey, entry]) => (
<Row key={configKey} configKey={configKey} entry={entry} />
))}
</tbody>
</table>
</>
)
}
type RowProps = { configKey: string; entry: ConfigEntry<unknown> };
const Row = ({ configKey, entry }: RowProps) => (
<tr>
<td>{configKey}</td>
<td>{entry.source}</td>
<td>{String(entry.value)}</td>
</tr>
);
export default App;Expo/React Native
See complete example
- Install React Native Firebase
- Install Remote Config Module
- Expo: Make sure to configure your Expo app config.
import {
booleanType,
createFirebaseRemoteConfigContext,
createReactNativeFirebaseAdapter,
createSchema,
numberType,
stringType,
type ConfigEntry,
} from 'react-remote-config-context';
const configSchema = createSchema({
maxValue: numberType(30),
helloMessage: stringType('Hello from Default Value'),
featureFlag: booleanType(false),
limit: numberType(),
});
const rnFirebaseAdapter = createReactNativeFirebaseAdapter(configSchema);
const { RemoteConfigProvider, useRemoteConfig } =
createFirebaseRemoteConfigContext(rnFirebaseAdapter);
export default function App() {
return (
<RemoteConfigProvider adapter={rnFirebaseAdapter}>
<Body />
</RemoteConfigProvider>
);
}
function Body() {
const config = useRemoteConfig();
return (
<SafeAreaView style={styles.container}>
<FlatList
data={Object.entries(config.entries)}
renderItem={({ item }) => <Item configKey={item[0]} entry={item[1]} />}
keyExtractor={(item) => item[0]}
/>
</SafeAreaView>
);
}
type ItemProps = { configKey: string; entry: ConfigEntry<unknown> };
const Item = ({ configKey, entry }: ItemProps) => (
<View style={styles.item}>
<Text style={styles.title}>Key: {configKey}</Text>
<Text style={styles.title}>Source: {entry.source}</Text>
<Text style={styles.title}>Value: {String(entry.value)}</Text>
</View>
);Contributing
See the contributing guide to learn how to contribute to the repository and the development workflow.
License
MIT
Made with create-react-native-library