Update code examples

README.md

@@ -23,17 +23,15 @@ 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 { createRoot } from "react-dom/client";
 import { FlagsProvider } from "flagged";
 
-import App from "./components/app";
+import { App } from "./components/app";
 
-ReactDOM.render(
+createRoot(document.getElementById("root")!).render(
 	<FlagsProvider features={{ v2: true }}>
 		<App />
 	</FlagsProvider>,
-	document.querySelector("root"),
 );
 ```
 
@@ -46,35 +44,32 @@ The features prop you pass to `FlagsProvider` could be an array of strings or an
 **Using an Array**
 
 ```tsx
-ReactDOM.render(
+createRoot(document.getElementById("root")!).render(
 	<FlagsProvider features={["v2", "moderate"]}>
 		<App />
 	</FlagsProvider>,
-	document.querySelector("root"),
 );
 ```
 
 **Using an Object**
 
 ```tsx
-ReactDOM.render(
+createRoot(document.getElementById("root")!).render(
 	<FlagsProvider features={{ v2: true, moderate: false }}>
 		<App />
 	</FlagsProvider>,
-	document.querySelector("root"),
 );
 ```
 
 **Using Nested Objects**
 
 ```tsx
-ReactDOM.render(
+createRoot(document.getElementById("root")!).render(
 	<FlagsProvider
 		features={{ v2: true, content: { moderate: true, admin: false } }}
 	>
 		<App />
 	</FlagsProvider>,
-	document.querySelector("root"),
 );
 ```
 
@@ -85,31 +80,25 @@ 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";
 
-function Header() {
+export function Header() {
 	const hasV2 = useFeature("v2");
 
 	return <header>{hasV2 ? <h1>My App v2</h1> : <h1>My App v1</h1>}</header>;
 }
-
-export default Header;
 ```
 
 ### `withFeature` High Order Component
 
 This `withFeature` high order component let's you wrap a component behind a feature flag, this way the parent component using your wrapped component doesn't need to know anything about the feature flag. This is useful when you don't need to provide a fallback if the feature is disabled, e.g. for admin pieces of UI or new features you want to hide completely.
 
 ```tsx
-import * as React from "react";
 import { withFeature } from "flagged";
 
-function Heading() {
+export const Heading = withFeature("newHeading")(function Heading() {
 	return <h1>My App v2</h1>;
-}
-
-export default withFeature("v2")(Heading);
+});
 ```
 
 ### `Feature` Render Prop
@@ -119,10 +108,9 @@ 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";
 
-function Header() {
+export function Header() {
 	return (
 		<header>
 			<Feature name="v2">
@@ -131,17 +119,14 @@ function Header() {
 		</header>
 	);
 }
-
-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";
 
-function Header() {
+export function Header() {
 	return (
 		<header>
 			<Feature name="v2">
@@ -150,32 +135,26 @@ function Header() {
 		</header>
 	);
 }
-
-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";
 
-function Header() {
+export function 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";
 
-function Header() {
+export function Header() {
 	return (
 		<header>
 			<Feature
@@ -187,25 +166,20 @@ function Header() {
 		</header>
 	);
 }
-
-export default Header;
 ```
 
 ### `useFeatures` Custom Hook
 
 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";
 
-function Header() {
-	const features = useFeatures();
+export function Header() {
+	let features = useFeatures();
 
 	return (
 		<header>{features.v2 ? <h1>My App v2</h1> : <h1>My App v1</h1>}</header>
 	);
 }
-
-export default Header;
 ```