Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add notes on how to type props and components #2510

Merged
merged 7 commits into from
Jul 12, 2024
Merged

Add notes on how to type props and components #2510

Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
8280b02
Add TypeScript `Props` Type section to Using MDX
karlhorky Jul 8, 2024
c86da59
Fix linting warnings
karlhorky Jul 8, 2024
8303315
Fix quotes?
karlhorky Jul 8, 2024
59f4eb6
Switch to <Note>s instead
karlhorky Jul 8, 2024
192b11d
Import Note
karlhorky Jul 8, 2024
46c4528
Remove link
karlhorky Jul 10, 2024
8ea0ff7
Remove unused link
karlhorky Jul 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 18 additions & 0 deletions docs/docs/using-mdx.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import {Note} from '../_component/note.jsx'

export const info = {
author: [
{github: 'wooorm', name: 'Titus Wormer', twitter: 'wooorm'}
Expand Down Expand Up @@ -206,6 +208,13 @@ console.log(React.createElement(Example, {name: 'Venus', year: 2021}))
console.log(<Example name="Mars" year={2022} />)
```

<Note type="info">
**Note**:
Users of the MDX VS Code extension can add type
checking of `props` with a JSDoc comment.
See [`mdx-js/mdx-analyzer`][mdx-analyzer] for more info.
</Note>

### Components

There is one special prop: `components`.
Expand Down Expand Up @@ -325,6 +334,13 @@ as follows:
* Otherwise, if it starts with a lowercase, it’s a literal (`<a>` -> `h('a')`)
* Otherwise, it’s an identifier (`<A>` -> `h(A)`), which means a component `A`

<Note type="info">
**Note**:
Users of the MDX VS Code extension can add type
checking of provided and passed components with a JSDoc comment.
See [`mdx-js/mdx-analyzer`][mdx-analyzer] for more info.
</Note>

### Layout

There is one special component: the layout.
Expand Down Expand Up @@ -534,6 +550,8 @@ providers: pass components explicitly.

[what]: /docs/what-is-mdx/

[mdx-analyzer]: https://github.com/mdx-js/mdx-analyzer

[mdx-react]: /packages/react/

[mdx-preact]: /packages/preact/
Expand Down