{"id":20505731,"url":"https://github.com/codebdy/rxmodels-swr","last_synced_at":"2025-04-13T21:07:25.284Z","repository":{"id":104031084,"uuid":"389361580","full_name":"codebdy/rxmodels-swr","owner":"codebdy","description":"用于存取rxModels数据的React hooks，基于SWR, axios实现","archived":false,"fork":false,"pushed_at":"2021-09-20T01:55:08.000Z","size":119,"stargazers_count":6,"open_issues_count":0,"forks_count":3,"subscribers_count":2,"default_branch":"master","last_synced_at":"2023-12-19T18:22:56.775Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://rxdrag.com/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/codebdy.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2021-07-25T14:05:23.000Z","updated_at":"2022-11-12T16:45:31.000Z","dependencies_parsed_at":null,"dependency_job_id":"c793ff02-62b3-42f9-8ad4-800e430e2b9e","html_url":"https://github.com/codebdy/rxmodels-swr","commit_stats":{"total_commits":31,"total_committers":1,"mean_commits":31.0,"dds":0.0,"last_synced_commit":"61fde9cbb810a71558740410baee788f95efffbc"},"previous_names":["rxdrag/rxmodels-swr"],"tags_count":0,"template":null,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codebdy%2Frxmodels-swr","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codebdy%2Frxmodels-swr/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codebdy%2Frxmodels-swr/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codebdy%2Frxmodels-swr/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/codebdy","download_url":"https://codeload.github.com/codebdy/rxmodels-swr/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248782269,"owners_count":21160717,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":[],"created_at":"2024-11-15T19:49:35.863Z","updated_at":"2025-04-13T21:07:25.276Z","avatar_url":"https://github.com/codebdy.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Hooks to npm boilerplate\n\nThis repository is a boilerplate for creating custom React hooks and components that we can publish to NPM registry as packages.\n\nI've put together a quick tutorial, it assumes an understanding of React, hooks and unit tests.\n\nIf something is not clear, message me or raise an issue, I will explain in more detail.\n\nI've used this boilerplate to create my NPM package [https://www.npmjs.com/package/@nekogd/react-utility-hooks].\n\n## First things first\n\nFirstly, clone this repository. \n\nNext, go over to package.json file and amend name, description and author keys.\n\nThe package would be served on npm as per what you have typed in the \"name\".\n\nYou may want to use scoped naming i.e. \"@myscope/use-my-hook\"\n\nMore info: [https://docs.npmjs.com/using-npm/scope.html]\n\n## How we will be able to use your package\n\nIt follows the common React path.\n\nFollow through the included useCounter example and you will be fine.\n\nMake sure to export your hook (I prefer named exports) in index.ts.\n\nBasically you have to do three things:\n\na) write your hook (preferably test and type it)\n\nb) export it in index.ts file\n\nc) deploy to NPM\n\nWe will able to use your hook like so:\n\n```\n import { useYourHook } from 'your-package-name'\n```\n\n## Development commands\n\n```\n // watch\n yarn start\n\n // or\n npm run start\n```\n\n```\n // builds the dist folder\n yarn build\n\n // or\n npm run build\n```\n\n```\n // starts tests\n yarn test\n\n // or\n\n npm run test\n```\n\n## Local testing and yarn link\n\nTo locally test the package, do the following:\n\nLet's assume your package name is \"use-my-counter\" and your CRA is \"my-app\".\n\nLet's also assume they are in one workspace.\n\n```\nworkspace\n  - use-my-counter\n  - my-app\n```\n\na) in hook folder, run\n```\nyarn link\n```\nb) assuming you have a workspace, create a sample CRA app \n```\nnpx create-react-app my-app\n```\nc) navigate to your CRA app folder\n```\ncd my-app\n```\nd) run command\n```\n yarn link use-my-counter\n```\ne)  In your CRA app, you can now user package, as it's linked locally \n```\n  import { useMyCounter } from 'use-my-counter';\n```\n\nf) However, this will give you an error due to different copy of React and in CRA app. \n   To counter that let's assume that we have workspace\n```\nworkspace\n  - use-my-counter\n  - my-app\n```\n  We navigate to use-my-counter and type (this will link the React versions locally). \n  \n  Please amend the path to your needs.\n  ```\n   npm link ../my-app/node_modules/react\n  ```\n  We should be good to go to work locally. \n\n## Deployment to NPM\n\n### Login to correct NPM account\n\n```\nnpm login\n```\n\n### Versioning\n\nIncrease the version number as per NPM guides [https://docs.npmjs.com/about-semantic-versioning].\n\n```\n// increases the first digit i.e. from 0.5.4 to 1.0.0\nnpm version major\n\n// increases the second digit i.e. from 0.0.3 to 0.1.0\nnpm version minor\n\n// increases the third digit i.e. from 0.0.1 to 0.0.2\nnpm version patch\n```\n\n### Deployment\n\nRun the command and the package should be up.\n\n```\nnpm publish --access public\n```\n\n### What If I want to export a component? \n\nYou can do that too, following same pattern as you'd with hooks.\n\nBear in mind you'd propably need .tsx file and not .ts.\n\n### Share with the world\n\nShare your work and learnings with the world! :)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodebdy%2Frxmodels-swr","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcodebdy%2Frxmodels-swr","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodebdy%2Frxmodels-swr/lists"}