{text}
+ :{text}
+} +``` + +```js InspirationGenerator.js +import * as React from 'react'; +import quotes from './quotes'; +import FancyText from './FancyText'; + +export default function InspirationGenerator({children}) { + const [index, setIndex] = React.useState(0); + const quote = quotes[index]; + const next = () => setIndex((index + 1) % quotes.length); + + return ( + <> +Your inspirational quote is:
+©️ {year}
; +} +``` + +```js quotes.js +export default [ + "Don’t let yesterday take up too much of today.” — Will Rogers", + "Ambition is putting a ladder against the sky.", + "A joy that's shared is a joy made double.", + ]; +``` + +```css +.fancy { + font-family: 'Georgia'; +} +.title { + color: #007AA3; + text-decoration: underline; +} +.cursive { + font-style: italic; +} +.small { + font-size: 10px; +} +``` + +{text}
+ :{text}
+} +``` + +```js Color.js +export default function Color({value}) { + return +} +``` + +```js InspirationGenerator.js +import * as React from 'react'; +import inspirations from './inspirations'; +import FancyText from './FancyText'; +import Color from './Color'; + +export default function InspirationGenerator({children}) { + const [index, setIndex] = React.useState(0); + const inspiration = inspirations[index]; + const next = () => setIndex((index + 1) % inspirations.length); + + return ( + <> +Your inspirational {inspiration.type} is:
+ {inspiration.type === 'quote' + ?©️ {year}
; +} +``` + +```js inspirations.js +export default [ + {type: 'quote', value: "Don’t let yesterday take up too much of today.” — Will Rogers"}, + {type: 'color', value: "#B73636"}, + {type: 'quote', value: "Ambition is putting a ladder against the sky."}, + {type: 'color', value: "#256266"}, + {type: 'quote', value: "A joy that's shared is a joy made double."}, + {type: 'color', value: "#F9F2B4"}, +]; +``` + +```css +.fancy { + font-family: 'Georgia'; +} +.title { + color: #007AA3; + text-decoration: underline; +} +.cursive { + font-style: italic; +} +.small { + font-size: 10px; +} +.colorbox { + height: 100px; + width: 100px; + margin: 8px; +} +``` + console.log('onScroll')}
+ onWheel={e => console.log('onWheel')}
/>
```
diff --git a/src/content/reference/react-dom/hooks/index.md b/src/content/reference/react-dom/hooks/index.md
new file mode 100644
index 000000000..6490dc111
--- /dev/null
+++ b/src/content/reference/react-dom/hooks/index.md
@@ -0,0 +1,48 @@
+---
+title: "React DOM Hooks"
+---
+
+
+
+The `react-dom` package contains Hooks that are only supported for web applications (which run in the browser DOM environment). These Hooks are not supported in non-browser environments like iOS, Android, or Windows applications. If you are looking for Hooks that are supported in web browsers *and other environments* see [the React Hooks page](/reference/react). This page lists all the Hooks in the `react-dom` package.
+
+
+
+---
+
+## Form Hooks {/*form-hooks*/}
+
+
+
+Form Hooks are currently only available in React's canary and experimental channels. Learn more about [React's release channels here](/community/versioning-policy#all-release-channels).
+
+
+
+*Forms* let you create interactive controls for submitting information. To manage forms in your components, use one of these Hooks:
+
+* [`useFormStatus`](/reference/react-dom/hooks/useFormStatus) allows you to make updates to the UI based on the status of the a form.
+* `useFormState` allows you to manage state inside a form.
+
+```js
+function Form({ action }) {
+ async function increment(n) {
+ return n + 1;
+ }
+ const [count, incrementFormAction] = useFormState(increment, 0);
+ return (
+
+ );
+}
+
+function Button() {
+ const { pending } = useFormStatus();
+ return (
+
+ );
+}
+```
diff --git a/src/content/reference/react-dom/hooks/useFormStatus.md b/src/content/reference/react-dom/hooks/useFormStatus.md
new file mode 100644
index 000000000..abaa9b6f2
--- /dev/null
+++ b/src/content/reference/react-dom/hooks/useFormStatus.md
@@ -0,0 +1,261 @@
+---
+title: useFormStatus
+canary: true
+---
+
+
+
+The `useFormStatus` Hook is currently only available in React's canary and experimental channels. Learn more about [React's release channels here](/community/versioning-policy#all-release-channels).
+
+
+
+
+
+`useFormStatus` is a Hook that gives you status information of the last form submission.
+
+```js
+const { pending, data, method, action } = useFormStatus();
+```
+
+
+
+