tdeekens / flopflip

🎚 flopflip - Feature Toggling 🚦 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 🙏 Embracing real-time feature toggling in your React application Feature flagging with LaunchDarkly - Fun Fun Function Want to see a demo? Table of Contents • Why you might use this • Package Status • Installation • Getting Started • Using react-broadcast (Context) • Using react-redux (Redux) • Setup through a Redux store enhancer • Reconfiguring adapters • Adapters • LaunchDarkly adapter • Split.io adapter • GraphQL adapter • HTTP adapter • LocalStorage adapter • Memory adapter • API Reference • Hooks • Components • Higher-Order Components • Redux API (react-redux only) • 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 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 component redirecting. To toggle it all you need is: Having 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 but disable it for users who should not have access to the feature yet: ...or given you are using a React version with hooks and you can: 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 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 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 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 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 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 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 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 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 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 Version][combine-adapters-latest-icon]][combine-adapters-latest-version] [![combine-adapters Version][combine-adapters-next-icon]][combine-adapters-next-version] | [![combine-adapters Downloads][combine-adapters-downloads]][combine-adapters-downloads] | [![combine-adapters Minified + GZipped][combine-…