Wondering what’s next for npm?Check out our public roadmap! »

    TypeScript icon, indicating that this package has built-in type declarations

    0.7.0 • Public • Published

    React Molasses

    codecov Build status

    It includes 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.


    npm install @molassesapp/molasses-js react-molasses

    yarn add @molassesapp/molasses-js react-molasses


    To Require:

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

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

    // Initialize with your API Key
    const client = new MolassesClient({
      APIKey: "testapikey",
    // Then init which is a promise
    client.init().then(() => {
      const AppContainer = () => {
        return (
          <MolassesProvider client={client}>
              <App />
      ReactDOM.render(<AppContainer />, document.getElementById("root"))

    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


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


    Prop required type description
    client required MolassesClient the initialized MolassesClient to pass into the react context

    <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.


    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`


    const Component = (props) => (
      <Feature name="NEW_CHECKOUT" user={user}>
        <div>I'll render if NEW_CHECKOUT is active for that user</div>
    const ComponentB = (props) => (
        render={(isActive: boolean) => {
          return isActive ? <span>I'll render if I'm active</span> : <span>I won't</span>
    const ComponentC = (props) => (
      <Feature name="NEW_CHECKOUT" user={user}>
        {(isActive: boolean) => {
          return isActive ? <span>I'll render if I'm active</span> : <span>I won't</span>

    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(): MolassesClient

    A hook to expose the Molasses client to a component

    withMolasses(Component: React Component)

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


    const comp = (props) => {
      const isActive = props.molasses.isActive("FOO_TEST")
      return isActive ? <h1>active</h1> : <h1>off</h1>
    const Component = withMolasses(comp)


    npm i react-molasses

    DownloadsWeekly Downloads






    Unpacked Size

    110 kB

    Total Files


    Last publish


    • avatar