<img alt="Logo" src="https://raw.githubusercontent.com/tdeekens/flopflip/main/logo.png" width="250" /> <h2 align="center">🎚 flopflip - Feature Toggling 🚦</h2> Toggle (flip or flop) features being stored in Redux or in a broadcasting system (through the context) via a set of React components or HoCs. ❤️ React · Redux · Vitest · Turbo · TypeScript · @testing-library/react · Biome · Lodash · Changesets · tsup · pnpm 🙏 <a href="https://github.com/tdeekens/flopflip/actions?query=workflow%3A%22Test+and+Build%22"> <img alt="GitHub Action Status" src="https://github.com/tdeekens/flopflip/workflows/test/badge.svg"> </a> <a href="https://codecov.io/gh/tdeekens/flopflip"> <img alt="Codecov Coverage Status" src="https://img.shields.io/codecov/c/github/tdeekens/flopflip.svg?style=flat-square"> </a> <a href="https://snyk.io/test/github/tdeekens/flopflip"><img src="https://snyk.io/test/github/tdeekens/flopflip/badge.svg" alt="Known Vulnerabilities" data-canonical-src="https://snyk.io/test/github/{username}/{repo}" style="max-width:100%;"/></a> <img alt="Made with Coffee" src="https://img.shields.io/badge/made%20with-%E2%98%95%EF%B8%8F%20coffee-yellow.svg"> <a href="https://techblog.commercetools.com/embracing-real-time-feature-toggling-in-your-react-application-a5e6052716a9"> Embracing real-time feature toggling in your React application </a> <a href="https://www.youtube.com/watch?v=x-IqMNFPmkk"> Feature flagging with LaunchDarkly - Fun Fun Function </a> <details> <summary>Want to see a demo?</summary> <img alt="Demo" src="https://raw.githubusercontent.com/tdeekens/flopflip/main/demo.gif" /> </details>

Why you might use this
Package Status
Installation
Getting Started
Adapters
API Reference
Cypress Plugin
Module Formats
Browser Support

❯ Why you might use this

In summary feature toggling simplifies and speeds up your development processes. You can ship software more often, release to specified target audiences and test features with users (not only internal staff) before releasing them to everyone.

With flopflip you get many options and ways to toggle features. More elaborate examples below. For now imagine you have a new feature which is not finished developing. However, UX and QA already need access to it. It's hidden by a <Link> component redirecting. To toggle it all you need is:

<ToggleFeature flag="featureFlagName">
  <Link to="url/to/new/feature" />
</ToggleFeature>

Having flopflip setup up you can now target users by whatever you decide to send to e.g. LaunchDarkly. This could be location, hashed E-Mails or any user groups (please respect your user's privacy).

Another example would be to show a <button> but disable it for users who should not have access to the feature yet:

<ToggleFeature flag="featureFlagName">
  {({ isFeatureEnabled }) => (
    <button disabled={!isFeatureEnabled} onClick={this.handleClick}>
      Try out feature
    </button>
  )}
</ToggleFeature>

...or given you are using a React version with hooks and @flopflip/react-broadcast you can:

const MyFunctionComponent = () => {
  const isFeatureEnabled = useFeatureToggle('featureFlagName');
  const handleClick = () => console.log('🦄');

  return (
    <button disabled={!isFeatureEnabled} onClick={handleClick}>
      Try out feature
    </button>
  );
};

In all examples flags will update in realtime (depending on the adapter and provider) and the User Interface will update accordingly. If this sounds interesting to you, keep reading.

❯ Package Status

| Package | Version | Downloads | Sizes | | -------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------- | | react | [![react Version][react-latest-icon]][react-latest-version] [![react Version][react-next-icon]][react-next-version] | [![react Downloads][react-downloads]][react-downloads] | [![react Minified + GZipped][react-size]][react-size] | | react-broadcast | [![react-broadcast Version][react-broadcast-latest-icon]][react-broadcast-latest-version] [![react-broadcast Version][react-broadcast-next-icon]][react-broadcast-next-version] | [![react-broadcast Downloads][react-broadcast-downloads]][react-broadcast-downloads] | [![react-broadcast Minified + GZipped][react-broadcast-size]][react-broadcast-size] | | react-redux | [![react-redux Version][react-redux-latest-icon]][react-redux-latest-version] [![react-redux Version][react-redux-next-icon]][react-redux-next-version] | [![react-redux Downloads][react-redux-downloads]][react-redux-downloads] | [![react-redux Minified + GZipped][react-redux-size]][react-redux-size] | | launchdarkly-adapter | [![launchdarkly-adapter Version][launchdarkly-adapter-latest-icon]][launchdarkly-adapter-latest-version] [![launchdarkly-adapter Version][launchdarkly-adapter-next-icon]][launchdarkly-adapter-next-version] | [![launchdarkly-adapter Downloads][launchdarkly-adapter-downloads]][launchdarkly-adapter-downloads] | [![launchdarkly-adapter Minified + GZipped][launchdarkly-adapter-size]][launchdarkly-adapter-size] | | splitio-adapter | [![splitio-adapter Version][splitio-adapter-latest-icon]][splitio-adapter-latest-version] [![splitio-adapter Version][splitio-adapter-next-icon]][splitio-adapter-next-version] | [![splitio-adapter Downloads][splitio-adapter-downloads]][splitio-adapter-downloads] | [![splitio-adapter Minified + GZipped][splitio-adapter-size]][splitio-adapter-size] | | memory-adapter | [![memory-adapter Version][memory-adapter-latest-icon]][memory-adapter-latest-version] [![memory-adapter Version][memory-adapter-next-icon]][memory-adapter-next-version] | [![memory-adapter Downloads][memory-adapter-downloads]][memory-adapter-downloads] | [![memory-adapter Minified + GZipped][memory-adapter-size]][memory-adapter-size] | | localstorage-adapter | [![localstorage-adapter Version][localstorage-adapter-latest-icon]][localstorage-adapter-latest-version] [![localstorage-adapter Version][localstorage-adapter-next-icon]][localstorage-adapter-next-version] | [![localstorage-adapter Downloads][localstorage-adapter-downloads]][localstorage-adapter-downloads] | [![localstorage-adapter Minified + GZipped][localstorage-adapter-size]][localstorage-adapter-size] | | graphql-adapter | [![graphql-adapter Version][graphql-adapter-latest-icon]][graphql-adapter-latest-version] [![graphql-adapter Version][graphql-adapter-next-icon]][graphql-adapter-next-version] | [![graphql-adapter Downloads][graphql-adapter-downloads]][graphql-adapter-downloads] | [![graphql-adapter Minified + GZipped][graphql-adapter-size]][graphql-adapter-size] | | http-adapter | [![http-adapter Version][http-adapter-latest-icon]][http-adapter-latest-version] [![http-adapter Version][http-adapter-next-icon]][http-adapter-next-version] | [![http-adapter Downloads][http-adapter-downloads]][http-adapter-downloads] | [![http-adapter Minified + GZipped][http-adapter-size]][http-adapter-size] | | combine-adapters | [![combine-adapters Version][combi

Flopflip

Install / Use

README

Table of Contents

❯ Why you might use this

❯ Package Status