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

Prop	required	type	description
client	required	`MolassesClient`	the 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

Prop	required	type	description
name	required	`string`	The name of the feature to be evaluated
user	optional	`User`	The user who to evaluate against
render	optional	`Function	JSX.Element`
render	optional	`Function	JSX.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);