diff --git a/README.md b/README.md
index acbcecb..520adce 100644
--- a/README.md
+++ b/README.md
@@ -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"),
 );
 ```
 
@@ -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"),
 );
 ```
 
@@ -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;
@@ -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);
@@ -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;
@@ -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;
@@ -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;
@@ -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;