Skip to content

Commit

Permalink
address feedback
Browse files Browse the repository at this point in the history
  • Loading branch information
jontallboy committed May 21, 2024
1 parent 54d0a16 commit 7cbacda
Showing 1 changed file with 2 additions and 2 deletions.
4 changes: 2 additions & 2 deletions docs/reference/islands.md
Original file line number Diff line number Diff line change
Expand Up @@ -55,14 +55,14 @@ export default function InteractiveComponent({ defaultCount }) {

Name | Type | Default | Description
-- | -- | -- | --
<span style="color:white">**clientOnly**</span> | `boolean` | `false` | This is set to `false` by default, but when set to `true` then the Island won’t be rendered on the server. This can be useful for components that rely on logic/libraries that can only run in the browser.
<span style="color:white">**clientOnly**</span> | `boolean` | `false` | When set to `true` the Island won’t be rendered on the server. This can be useful for components that rely on logic/libraries that can only run in the browser.
<span style="color:white">**hydrateOn**</span> | `"load" \| "visible" \| "idle"` | `"load"` | When rendering a page with Islands on the server the output includes a script to initialize Islands on the client. Hydrating means downloading and initializing the Island component code, so using these different hydration types strategically to defer some of that work can help boost initial page load performance! See [Hydration Types](#hydration-types) below for more information.
<span style="color:white">**id**</span> | `string` | - | By default, we generate a unique id for your island, but if you wish to provide your own identifier, you can use this prop.
<span style="color:white">**module***</span> | `React.Component` | - | This can be any React component as long as the import URL for this component includes the `?island` suffix. Refer to the `InteractiveComponent` example at the top of the docs.
<span style="color:white">**wrapperTag**</span> | `string `| `"div"` | The string provided must be a valid HTML element tag (e.g. 'span', 'article', 'section', etc).
<span style="color:white">**wrapperClassName**</span> | `string` | - | This value gets passed through to the wrapper component of the island, whether that be the default `div` or a custom tag/component provided by the `wrapperTag` or `Wrapper` component props.
<span style="color:white">**wrapperStyle**</span> | `CSSProperties` | - | The `CSSProperties` provided will be applied inline to the `wrapperTag` of the island.
<span style="color:white">**Wrapper**</span> | `React.Component` | - | This prop provides a mechanism to wrap your island's react tree in a context provider, commonly used for [CSS-in-JS solutions](https://github.hubspot.com/cms-react/reference/styling.html#styled-components). Please note that when using the `Wrapper` prop **you must import the component passed with a `?client` suffix** to make sure it can be bundled for the client.
<span style="color:white">**Wrapper**</span> | `React.Component` | - | This prop allows you to provide a custom context provider that will wrap the React tree of your island component. This is particularly useful for integrating with [CSS-in-JS libraries](https://github.hubspot.com/cms-react/reference/styling.html#styled-components), such as styled-components, or other context providers that need to encapsulate the component's subtree for applying styles or context values.

### [Hydration types](#hydration-types)
The default behavior of the island initialization script is to eagerly hydrate all Islands as soon as possible, i.e., on `load`, but there are other strategies available when hydrating components:
Expand Down

0 comments on commit 7cbacda

Please sign in to comment.