https://github.com/noahbuscher/react-tsdoc-loader
Loader to use react-tsdoc blobs in Storybook Docs plugin (ArgsTable, Controls)
https://github.com/noahbuscher/react-tsdoc-loader
documentation react storybook typescript
Last synced: 3 months ago
JSON representation
Loader to use react-tsdoc blobs in Storybook Docs plugin (ArgsTable, Controls)
- Host: GitHub
- URL: https://github.com/noahbuscher/react-tsdoc-loader
- Owner: noahbuscher
- License: mit
- Created: 2022-01-05T05:04:32.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2022-01-24T19:53:32.000Z (over 4 years ago)
- Last Synced: 2025-12-31T14:44:30.044Z (6 months ago)
- Topics: documentation, react, storybook, typescript
- Language: JavaScript
- Homepage:
- Size: 116 KB
- Stars: 3
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# react-tsdoc-loader
react-tsdoc-loader allows for parsing of React components with [react-tsdoc](https://github.com/noahbuscher/react-tsdoc) and injecting the result for use in Storybook, such as in:
- [Storybook Controls](https://storybook.js.org/docs/react/essentials/controls)
- [Storybook Docs](https://storybook.js.org/addons/@storybook/addon-docs) (ArgsTable, DocsPage)
## Install
To install, first run the following in your root directory.
```
npm install -D react-tsdoc-loader
```
To add to storybook, add the following to your `.storybook/main.js` file:
```js
module.exports = {
typescript: {
reactDocgen: false // Turns off Storybook's built-in docgen tools
},
webpackFinal: async (config, { configType }) => {
// Run the loader on Typescript component files in your project
config.module.rules.push({
test: /\.tsx$/,
use: ['react-tsdoc-loader'],
include: path.resolve(__dirname, '../'),
enforce: 'post'
});
return config;
},
}
```
That's it! Now your docs will be visible in Storybook.
## Writing Docs
This loader is powered by [react-tsdoc](https://github.com/noahbuscher/react-tsdoc) and uses the `@prop` tag to document props. It will also inject if the prop is required, default value(s), and a _lot_ of helpful type information.
An example component with a default value and description for a prop might look like this:
```tsx
/**
* Nice button
*
* @prop label - Label for the button
*/
const Button = ({
label = 'Click me!'
}: {
label: string
}) => (
{label}
);
```
To learn more, visit the [react-tsdoc](https://github.com/noahbuscher/react-tsdoc).