A template code repo for creating typescript based react component or typescript based modules to publish over npm. Just follow few steps and you can start publishing your code on npm.
A template code for creating typescript based react component or modules. Bundled with configuration for jest, eslint, prettier, and husky pre-commit hook.
These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See publish notes on how to publish the package on npm.
As you already know about JS, you better know the prerequisites, Node JS and NPM.
Let's start with the following steps.
-
Now click here to use this template to create a new repo for package.
-
Once repo is created clone it into your local machine.
-
Now run the following code in project directory to install dependencies.
npm run setup
-
Thats all you are ready to create new typescript based react component package or TS module. Just update the src/index.tsx.
Follow to step to create a build.
-
Once you updated the src/index.tsx and created react component or typescript module.
-
Then the following command in projet directory.
npm run build
-
Once the command output is completed you will get a dist folder with index.js and index.d.ts files.
-
Thats all you are ready to publish your package on npm.
can test your package in the following way.
-
You can import your component from dist folder in your demo/index.tsx file.
-
Then in demo/index.tsx you can pass specific props for the component. Now run following command in demo directory
npm run start
Following step are used to run test cases created for component or module.
-
As Jest framework is installed in your package.json. So add test files in ___test___ folder.
-
Then run command to execute test cases.
npm run test
You have tested your package and ready to publish to NPM. Follow the steps.
-
Once the build is created successfully & tested.
-
Update package.json file with your package name and version and other details.
-
Now run the following command in project directory to login with your npm account.
npm run login
-
Now run the following command to publish your package on npm.
npm run publish
- @girishsawant999 - Idea & Initial work
See also the list of contributors who participated in this project.