Skip to content

Quickstart your React components library with this template!

Notifications You must be signed in to change notification settings

BenElferink/react-npm-template

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

9 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

React NPM Template

How to use this template

STEP 1: Create repo

Click "Use this template" to generate a new repository.
Then open your terminal and clone your repository:

cd ~/Desktop
git clone https://github.com/[your-user-name]/[your-repo-name].git


STEP 2: Install dependencies

Go to the root of your repository's folder, and install all dependecies:

cd ~/Desktop/[your-repo-name]
npm install


STEP 3: Code and test

Create your components and/or logic, then when you'd like to test your code, create a new React app, and link the package to it:

cd ~/Desktop
npx create-react-app [test-app-name]
cd [your-repo-name]
npm link
cd [test-app-name]
npm link [your-repo-name]

Now you can import your components in the testing application as if it were installed from NPM.


STEP 4: Build and publish

Before building and publishing, there are a few paramters that you need to tweak:

  • In package.json update the name field, this is the name that will be used on NPM (unique).
  • In package.json make sure the private field is false.
  • In package.json you can make other optional changes, but do NOT change the peerDependencies, main, and types fields.

Now to build and publish run the following commands:

cd [your-repo-name]
npm run build
npm login
npm publish



NOTE: Update README.md 👇

The top part of of this readme is for you as a developer, the bottom part (from this parapagraph) is for the user, tweak it according to your library, and then you should publish the package.



Installation and usage

Install from npm:

npm i --save <package name>

Then use it in your app:

import Example from '<package name>'

function App(){
	
  const handleClick = () => {
    console.log('Clicked!')
  }

  return (
    <Example onClick={handleClick} >
      Just an example...
    </Example>
  )
}

Props

Common props you may want to include:

Prop Requirement Default Value Description
children Optional 'Button' Should contain the button's text
style Optional {} React.CSSProperties style object
className Optional '' Additional class name(s)
onClick Optional () => null Function triggered by onClick event

About

Quickstart your React components library with this template!

Topics

Resources

Stars

Watchers

Forks