https://github.com/rabiroshan/react-feature-flipper

https://github.com/rabiroshan/react-feature-flipper

Last synced: 22 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/rabiroshan/react-feature-flipper
• Owner: RabiRoshan
• License: mit
• Created: 2024-01-19T09:59:26.000Z (10 months ago)
• Default Branch: main
• Last Pushed: 2024-01-20T15:20:03.000Z (10 months ago)
• Last Synced: 2024-09-23T05:19:12.049Z (about 2 months ago)
• Language: TypeScript
• Size: 144 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# react-feature-flipper

Effortlessly manage feature flags in React. `react-feature-flipper` simplifies flag distribution and control across your application, providing an intuitive and efficient solution for feature toggling.

## Features

- **Easy Integration**: Seamlessly integrates with any React project.

- **Dynamic Flag Management**: Allows for flexible and dynamic control of feature visibility within your application.

- **Context-Based**: Utilizes React's context API for efficient flag state management.

- **Custom Hooks**: Provides `useFlags` hook for easy access to flag state and control within components.

## Installation

```bash

npm install @rabi_roshan/react-feature-flipper

```

Or

```bash

yarn add @rabi_roshan/react-feature-flipper

```

## Usage

### Basic Usage

```jsx

import React from "react";

import { FlagsProvider, Flipper } from "@rabi_roshan/react-feature-flipper";

const App = () => {

  return (

    

      

        
Feature 1 is active!

      

    

  );

};


export default App;

```

### Advanced Usage

#### Using `useFlags` Hook

```jsx

import React from "react";

import { useFlags, FlagsProvider } from "@rabi_roshan/react-feature-flipper";

const MyComponent = () => {

  const { flags, setFlags } = useFlags();

  // Example usage of the flags

  return (

    


      {flags.feature1 && 
Feature 1 is active!
}

       setFlags({ ...flags, feature1: !flags.feature1 })}>

        Toggle Feature 1

      

    

  );

};


const App = () => (

  

    

  

);

export default App;

```

#### Using `requireAllFlags`

By default, `Flipper` checks if at least one of the `authorizedFlags` is true. Use `requireAllFlags` to render content only if all specified flags are true.

```jsx

  
All required features are active!


```

#### Using `onNoMatchRender`

Customize rendering when the flag conditions aren't met using `onNoMatchRender`. It provides arrays of matched and unmatched flags.

```jsx

 (

    
Feature 1 is not active. Unmatched Flags: {unmatched.join(", ")}

  )}

>

  
Feature 1 is active!


```

#### Using `onMatchRender`

Define custom rendering for when flag conditions are met with `onMatchRender`. Note that `onMatchRender` is mutually exclusive with `children`.

```jsx

 (

    


      Feature 1 is active and custom rendered! Matched Flags:{" "}

      {matched.join(", ")}

    

  )}

/>

```


## License

`react-feature-flipper` is [MIT licensed](./LICENSE).