⚠️ This article was posted over 2 years ago. The information might be outdated. ⚠️
Table of Contents
- Creating your package
- Create the project directory
- Change into the project directory
- Initialise an NPM package(It would create th package.json for you)
- Create the entry point
- Write some code
- Publish it
- Extra stuff
- Test your package locally
- Creating react components as a package
- Passing props
- References
Creating your package
Simply Follow the code below.
# Create the project directory
$ mkdir samplePackage
# Change into the project directory
$ cd samplePackage
# Initialise an NPM package(It would create th package.json for you)
$ npm init
# Create the entry point
$ touch index.jsWrite some code
Whatever you put in module.exports is what would be available for importing when others install the package.
const Test = 'Test'
function Sum(a, b) {
return a + b
}
module.exports = { Test, Sum }Publish it
Simply, run
$ npm publishExtra stuff
Get badges at Shields.io: Quality metadata badges for open source projects
Test your package locally
npm install /absolute/path/yourPackageOr you can create index.html like below and test it out there.
<!DOCTYPE html>
<html>
<head>
<script src="index.js"></script>
</head>
<body>
<h1>Test HTML FILE</h1>
</body>
</html>Creating react components as a package
Use create-react-library.
Make sure to add a .gitignore file like below
.gitignore
/node_modules
/example/node_modulesUse the latest version of your package locally
Make sure to run the command below to use the the latest version of your package locally.
$ yarn buildPassing props
You can pass props like the code below.
static propTypes = {
markdownText: PropTypes.string,
test: PropTypes.boolean
}
// To access the defined porps.
this.props.markdownText