molasseslogo

React JavaScript Sdk#

the React (with TypeScript support) SDK for Molasses. It allows you to evaluate a user's status for a feature. It also helps simplify logging events for A/B testing.

react-molasses offers a provider with hooks and with support. Once initialized, it takes microseconds to evaluate if a user is active. react-molasses does rely on molasses-js as a client.

Install#

npm install @molassesapp/molasses-js react-molasses

yarn add @molassesapp/molasses-js react-molasses

Usage#

To Require:

js
1
import { MolassesClient } from "@molassesapp/molasses-js";
2
import { MolassesProvider } from "react-molasses";

Initialize the same way you would with molasses-js, but wrap your main application in the MolassesProvider

js
1
// Initialize with your API Key
2
const client = new MolassesClient({
3
APIKey: "testapikey",
4
});
5
6
// Then init which is a promise
7
client.init().then(() => {
8
const AppContainer = () => {
9
return (
10
<MolassesProvider client={client}>
11
<Router>
12
<App />
13
</Router>
14
</MolassesProvider>
15
);
16
};
17
18
ReactDOM.render(<AppContainer />, document.getElementById("root"));
19
});

Once it's initialized, you can then use Molasses in any component using React's context api. We've created a set of hooks and components to make this easier for you.


Components and Hooks#

MolassesProvider#

<MolassesProvider client={client}>

Wraps any children and provides the MolassesClient in the React.context. Molasses must be initialized before it can be used.

Props

Proprequiredtypedescription
clientrequiredMolassesClientthe initialized MolassesClient to pass into the react context

Feature#

<Feature name="NAME" user={user}>

A component to evaluate a Feature by name. It can be used in several different ways, declarative using children, function based and using the render prop.

Props

Proprequiredtypedescription
namerequiredstringThe name of the feature to be evaluated
useroptionalUserThe user who to evaluate against
renderoptional`FunctionJSX.Element`
renderoptional`FunctionJSX.Element`

Examples

jsx
1
const Component = (props) => (
2
<Feature name="NEW_CHECKOUT" user={user}>
3
<div>I'll render if NEW_CHECKOUT is active for that user</div>
4
</Feature>
5
);
6
7
const ComponentB = (props) => (
8
<Feature
9
name="NEW_CHECKOUT"
10
user={user}
11
render={(isActive: boolean) => {
12
return isActive ? (
13
<span>I'll render if I'm active</span>
14
) : (
15
<span>I won't</span>
16
);
17
}}
18
/>
19
);
20
21
const ComponentC = (props) => (
22
<Feature name="NEW_CHECKOUT" user={user}>
23
{(isActive: boolean) => {
24
return isActive ? (
25
<span>I'll render if I'm active</span>
26
) : (
27
<span>I won't</span>
28
);
29
}}
30
</Feature>
31
);

useFeature#

useFeature(name: string, user: User): boolean

A hook to determine if a given feature is active for a User. Uses the Molasses context under the hood

useMolasses#

useMolasses(): MolassesClient

A hook to expose the Molasses client to a component

withMolasses#

withMolasses(Component: React Component)

A HOC that passes the MolassesClient as the prop molasses to the component

Example

jsx
1
const comp = (props) => {
2
const isActive = props.molasses.isActive("FOO_TEST");
3
return isActive ? <h1>active</h1> : <h1>off</h1>;
4
};
5
const Component = withMolasses(comp);
React JavaScript Sdk