Skip to content

Commit

Permalink
Pass Prettier to README
Browse files Browse the repository at this point in the history
  • Loading branch information
@sergiodxa
sergiodxa committed Mar 21, 2024
1 parent 4c978fe commit ef4c0d0
Showing 1 changed file with 73 additions and 72 deletions.
145 changes: 73 additions & 72 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,17 +23,17 @@ yarn add flagged
Import the `FlagsProvider` in your code and wrap your application around it.

```tsx
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { FlagsProvider } from 'flagged';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { FlagsProvider } from "flagged";

import App from './components/app';
import App from "./components/app";

ReactDOM.render(
<FlagsProvider features={{ v2: true }}>
<App />
</FlagsProvider>,
document.querySelector('root')
<FlagsProvider features={{ v2: true }}>
<App />
</FlagsProvider>,
document.querySelector("root"),
);
```

Expand All @@ -44,34 +44,37 @@ Now use `useFeature`, `withFeature` or `Feature` to check if the feature is enab
The features prop you pass to `FlagsProvider` could be an array of strings or an object, if you decide to use an object you could also pass nested objects to group feature flags together.

**Using an Array**

```tsx
ReactDOM.render(
<FlagsProvider features={['v2', 'moderate']}>
<App />
</FlagsProvider>,
document.querySelector('root')
<FlagsProvider features={["v2", "moderate"]}>
<App />
</FlagsProvider>,
document.querySelector("root"),
);
```

**Using an Object**

```tsx
ReactDOM.render(
<FlagsProvider features={{ v2: true, moderate: false }}>
<App />
</FlagsProvider>,
document.querySelector('root')
<FlagsProvider features={{ v2: true, moderate: false }}>
<App />
</FlagsProvider>,
document.querySelector("root"),
);
```

**Using Nested Objects**

```tsx
ReactDOM.render(
<FlagsProvider
features={{ v2: true, content: { moderate: true, admin: false } }}
>
<App />
</FlagsProvider>,
document.querySelector('root')
<FlagsProvider
features={{ v2: true, content: { moderate: true, admin: false } }}
>
<App />
</FlagsProvider>,
document.querySelector("root"),
);
```

Expand All @@ -82,13 +85,13 @@ If you use nested objects you will need to either use the `useFeatures` hook or
The `useFeature` custom hook is the base for the HOC and Render Prop implementation, it lets you check if a single feature is enabled and get a boolean, then you can do anything you want with that value, uesful to use it in combination with other hooks like useEffect or to show two different UIs based on a feature being enabled or not.

```tsx
import * as React from 'react';
import { useFeature } from 'flagged';
import * as React from "react";
import { useFeature } from "flagged";

function Header() {
const hasV2 = useFeature('v2');
const hasV2 = useFeature("v2");

return <header>{hasV2 ? <h1>My App v2</h1> : <h1>My App v1</h1>}</header>;
return <header>{hasV2 ? <h1>My App v2</h1> : <h1>My App v1</h1>}</header>;
}

export default Header;
Expand All @@ -103,7 +106,7 @@ import * as React from "react";
import { withFeature } from "flagged";

function Heading() {
return <h1>My App v2</h1>
return <h1>My App v2</h1>;
}

export default withFeature("v2")(Heading);
Expand All @@ -116,17 +119,17 @@ The `Feature` component works using the render prop pattern and as a wrapper. Th
Pass the name of the feature you want to check for and a children value and it will not render the children if the feature is enabled.

```tsx
import * as React from 'react';
import { Feature } from 'flagged';
import * as React from "react";
import { Feature } from "flagged";

function Header() {
return (
<header>
<Feature name="v2">
<h1>My App v2</h1>
</Feature>
</header>
);
return (
<header>
<Feature name="v2">
<h1>My App v2</h1>
</Feature>
</header>
);
}

export default Header;
Expand All @@ -135,19 +138,17 @@ export default Header;
Another option is to pass a function as children and get a boolean if the feature is enabled, this way you can render two different pieces of UI based on the feature being enabled or not.

```tsx
import * as React from 'react';
import { Feature } from 'flagged';
import * as React from "react";
import { Feature } from "flagged";

function Header() {
return (
<header>
<Feature name="v2">
{(isEnabled) =>
isEnabled ? <h1>My App v2</h1> : <h1>My App v1</h1>
}
</Feature>
</header>
);
return (
<header>
<Feature name="v2">
{(isEnabled) => (isEnabled ? <h1>My App v2</h1> : <h1>My App v1</h1>)}
</Feature>
</header>
);
}

export default Header;
Expand All @@ -156,35 +157,35 @@ export default Header;
In both cases you could also send a `render` prop instead of `children`.

```tsx
import * as React from 'react';
import { Feature } from 'flagged';
import * as React from "react";
import { Feature } from "flagged";

function Header() {
return (
<header>
<Feature name="v2" render={<h1>My App v2</h1>} />
</header>
);
return (
<header>
<Feature name="v2" render={<h1>My App v2</h1>} />
</header>
);
}

export default Header;
```

```tsx
import * as React from 'react';
import { Feature } from 'flagged';
import * as React from "react";
import { Feature } from "flagged";

function Header() {
return (
<header>
<Feature
name="v2"
render={(isEnabled) =>
isEnabled ? <h1>My App v2</h1> : <h1>My App v1</h1>
}
/>
</header>
);
return (
<header>
<Feature
name="v2"
render={(isEnabled) =>
isEnabled ? <h1>My App v2</h1> : <h1>My App v1</h1>
}
/>
</header>
);
}

export default Header;
Expand All @@ -195,15 +196,15 @@ export default Header;
The `useFeatures` custom hook is the base for the `useFeature` custom hook, it gives you the entire feature flags object or array you sent to `FlagsProvider` so you could use it however you want.

```tsx
import * as React from 'react';
import { useFeatures } from 'flagged';
import * as React from "react";
import { useFeatures } from "flagged";

function Header() {
const features = useFeatures();
const features = useFeatures();

return (
<header>{features.v2 ? <h1>My App v2</h1> : <h1>My App v1</h1>}</header>
);
return (
<header>{features.v2 ? <h1>My App v2</h1> : <h1>My App v1</h1>}</header>
);
}

export default Header;
Expand Down

0 comments on commit ef4c0d0

Please sign in to comment.