{"id":20918144,"url":"https://github.com/noahbuscher/react-tsdoc-loader","last_synced_at":"2026-04-07T23:31:25.086Z","repository":{"id":73043541,"uuid":"444670594","full_name":"noahbuscher/react-tsdoc-loader","owner":"noahbuscher","description":"Loader to use react-tsdoc blobs in Storybook Docs plugin (ArgsTable, Controls)","archived":false,"fork":false,"pushed_at":"2022-01-24T19:53:32.000Z","size":119,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-12-31T14:44:30.044Z","etag":null,"topics":["documentation","react","storybook","typescript"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/noahbuscher.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-01-05T05:04:32.000Z","updated_at":"2025-05-28T19:51:53.000Z","dependencies_parsed_at":null,"dependency_job_id":"93f9797d-1eae-4408-9a80-a2ed7bc5304f","html_url":"https://github.com/noahbuscher/react-tsdoc-loader","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/noahbuscher/react-tsdoc-loader","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/noahbuscher%2Freact-tsdoc-loader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/noahbuscher%2Freact-tsdoc-loader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/noahbuscher%2Freact-tsdoc-loader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/noahbuscher%2Freact-tsdoc-loader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/noahbuscher","download_url":"https://codeload.github.com/noahbuscher/react-tsdoc-loader/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/noahbuscher%2Freact-tsdoc-loader/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31533823,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-07T16:28:08.000Z","status":"ssl_error","status_checked_at":"2026-04-07T16:28:06.951Z","response_time":105,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["documentation","react","storybook","typescript"],"created_at":"2024-11-18T16:37:49.529Z","updated_at":"2026-04-07T23:31:25.070Z","avatar_url":"https://github.com/noahbuscher.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-tsdoc-loader\n\nreact-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:\n\n- [Storybook Controls](https://storybook.js.org/docs/react/essentials/controls)\n- [Storybook Docs](https://storybook.js.org/addons/@storybook/addon-docs) (ArgsTable, DocsPage)\n\n## Install\n\nTo install, first run the following in your root directory.\n\n```\nnpm install -D react-tsdoc-loader\n```\n\nTo add to storybook, add the following to your `.storybook/main.js` file:\n\n```js\nmodule.exports = {\n  typescript: {\n    reactDocgen: false // Turns off Storybook's built-in docgen tools\n  },\n  webpackFinal: async (config, { configType }) =\u003e {\n    // Run the loader on Typescript component files in your project\n    config.module.rules.push({\n      test: /\\.tsx$/,\n      use: ['react-tsdoc-loader'],\n      include: path.resolve(__dirname, '../'),\n      enforce: 'post'\n    });\n    \n    return config;\n  },\n}\n```\n\nThat's it! Now your docs will be visible in Storybook.\n\n## Writing Docs\n\nThis 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.\n\nAn example component with a default value and description for a prop might look like this:\n\n```tsx\n/**\n * Nice button\n *\n * @prop label - Label for the button\n */\nconst Button = ({\n\tlabel = 'Click me!'\n}: {\n\tlabel: string\n}) =\u003e (\n  \u003cbutton\u003e{label}\u003c/button\u003e\n);\n```\n\nTo learn more, visit the [react-tsdoc](https://github.com/noahbuscher/react-tsdoc).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnoahbuscher%2Freact-tsdoc-loader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnoahbuscher%2Freact-tsdoc-loader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnoahbuscher%2Freact-tsdoc-loader/lists"}