From 4c34ee2fc4187281d560dd891574f5d8c5981c97 Mon Sep 17 00:00:00 2001 From: Alexandre Asselin Date: Wed, 4 Dec 2024 11:19:00 -0500 Subject: [PATCH] article reviews --- .../components/concepts/client-side-routing.mdx | 2 +- .../content/components/concepts/controlled-mode.mdx | 10 +++++----- apps/docs/content/components/concepts/forms.mdx | 2 +- 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/apps/docs/content/components/concepts/client-side-routing.mdx b/apps/docs/content/components/concepts/client-side-routing.mdx index 272a4a71f..bfee68967 100644 --- a/apps/docs/content/components/concepts/client-side-routing.mdx +++ b/apps/docs/content/components/concepts/client-side-routing.mdx @@ -4,7 +4,7 @@ description: Many Hopper components support rendering as HTML links. This page d order: 4 --- -_Since Hopper components are designed on top of React Aria, this article will be heavily inspired by the [Client Side Routing](https://react-spectrum.adobe.com/react-spectrum/routing.html) article in React-Aria's documentation._ +_Since Hopper components are designed on top of React Aria, this article is heavily inspired by the [Client Side Routing](https://react-spectrum.adobe.com/react-spectrum/routing.html) article in React-Aria's documentation._ ## Introduction diff --git a/apps/docs/content/components/concepts/controlled-mode.mdx b/apps/docs/content/components/concepts/controlled-mode.mdx index 7590a109b..65cce3bad 100644 --- a/apps/docs/content/components/concepts/controlled-mode.mdx +++ b/apps/docs/content/components/concepts/controlled-mode.mdx @@ -2,17 +2,17 @@ title: Controlled Mode order: 4 --- -When working with Hopper components, you can customize a component's behavior using controlled or uncontrolled properties, depending on your needs. This flexibility is particularly useful for implementing interactive features or modifying the default behavior of components while maintaining their visual style and structure. +When working with Hopper components, you can customize a component's behavior using **controlled** or **uncontrolled** properties, depending on your needs. This flexibility is the foundation for **building custom components** on top of Hopper, enabling you to implement interactive features or modify the default behavior of components while preserving their visual style and structure. **Tip**: To dive deeper into the concept of controlled and uncontrolled components in React, read [React's guide here](https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components). ## Uncontrolled Mode -**Uncontrolled mode** is suitable for scenarios where you don’t need to respond programmatically to user interactions. +**Uncontrolled mode** is great for situations where you don’t need to manage the component’s behavior with your own code. In uncontrolled mode, the component manages its internal state. You provide an initial value using _defaultX_ properties, and the component updates its state automatically in response to user interactions. -For example, to create a TagGroup where some tags are initially selected, use the defaultSelectedKeys prop: +For example, to create a [TagGroup](../collections/TagGroup) where some tags are initially selected, use the `defaultSelectedKeys` prop: @@ -22,9 +22,9 @@ In this example: ## Controlled Mode -**Controlled mode** is suitable for scenarios where the component's state depends on external data or when you need to respond programmatically to user interactions +**Controlled mode** is suitable for scenarios where the component's state depends on external data or when you need to respond programmatically to user interactions or when you need to build a custom component. -In controlled mode, you manage the state of the component externally by providing the _X_ and _onXChanged_ properties. This allows for full control over the component's behavior and is ideal for complex interactions or when the component's state is derived from external logic. +In controlled mode, you manage the state of the component externally by providing the `X` and `onXChanged` properties. This allows for full control over the component's behavior and is ideal for complex interactions or when the component's state is derived from external logic. For example, to fully manage the selected tags: diff --git a/apps/docs/content/components/concepts/forms.mdx b/apps/docs/content/components/concepts/forms.mdx index 25b47fe54..f3e0fdd82 100644 --- a/apps/docs/content/components/concepts/forms.mdx +++ b/apps/docs/content/components/concepts/forms.mdx @@ -4,7 +4,7 @@ description: Forms allow users to enter and submit data, and provide them with f order: 6 --- -_Since Hopper components are designed on top of React Aria, this article will be heavily inspired by the [Forms](https://react-spectrum.adobe.com/react-spectrum/forms.html) article in React-Aria's documentation._ +_Since Hopper components are designed on top of React Aria, this article is heavily inspired by the [Forms](https://react-spectrum.adobe.com/react-spectrum/forms.html) article in React-Aria's documentation._ ## Labels and help text