Reactor feature toggle


 



Your module to handle with feature toggles in ReactJS applications easier.

Why Feature toggle?

> This is a common concept, but why use this directive instead solve it via server-side rendering?

The idea of this directive is make this process transparent and easier. So the main point is integrate this directive with other tooling process, such as:

- Server-side rendering;
- Progressive rendering;
- Any other that yoy like :)

You can integrate with WebSockets or handling this in a EventSourcing architecture. It's totally transparent for you and you can integrate easier in your application.

- Install
- Setup
- Usage
- Releases
- Demo

Install

You can get it on NPM installing reactor-feature-toggle module as a project dependency.

``shell
npm install reactor-feature-toggle --save
`

You can also use the standalone UMD build by including dist/reactor-feature-toggle.js in your page. If you do this you'll also need to include the dependencies. For example:

`html



`

Setup

$3

You'll need to import FeatureToggleProvider and add it into the root component of your application. So that you can enable/disable features via FeatureToggle component any place in your application.

Also, multiple FeatureToggleProvider are allowed, which gives more flexibility for your application.

`javascript
import React, { Component } from 'react';
// FeatureToggleProvider and useFeatureToggle() is only available on client-side
import { FeatureToggleProvider } from 'reactor-feature-toggle/client';
// FeatureToggle is available on both client and server sides
import { FeatureToggle } from 'reactor-feature-toggle';

const AppWrapper = () => {
const featureToggleData = {
enableMainContent: true,
enableDescriptionContent: true,
enableSecondContent: false,
};

return (



export default AppWrapper;
`

$3

`javascript
// Make sure your parent component is wrapped with FeatureToggleProvider component
import { useFeatureToggle } from 'reactor-feature-toggle';

function Dashboard() {
const { isOn } = useFeatureToggle();

// {
// enableNewDashboard: true,
// enableProPlan: true,
// enableBetaFeatures: false,
// }
//
const canAccessNewDashboard = isOn('enableNewDashboard') && isOn('enableProPlan');
const showBetaFeatures = isOn('enableBetaFeatures');

if (canAccessNewDashboard) {
return

For Server-Side Rendering or React Server Components, initialize feature-toggle-service directly without the Provider:

`javascript
import { set, FeatureToggle } from 'reactor-feature-toggle';

// Initialize feature flags (typically in your root server component)
const featureFlags = {
enableMainContent: true,
enableServerSideFeature: true,
enableNewAPI: false,
};

set(featureFlags);

// Use FeatureToggle component in any Server Component
export default function ServerPage() {
return
(


this project is using np package to publish, which makes things straightforward. EX: np `

> For more details, please check np package on npmjs.com

Author

Wilson Mendes (willmendesneto)
-