Hey React Componets

Oct 16 2024

Do you want to build your own npm reusable react component library. I built this one very quickly. It is a simple component library including of a Card, Button, Form, Table and more components to come. Some key features are the Form component allows you to define form fields as content childeren and the Table component supports sorting, filtering and pagination.

$ npm i hey-react-components

Want to create your own. Follow these steps

Step 1: Set Up Your Project

1. Initialize your project:

mkdir my-component-library
cd my-component-library
npm init -y

2. Install necessary dependencies:

npm install react react-dom
npm install --save-dev typescript @types/react @types/react-dom rollup @rollup/plugin-node-resolve @rollup/plugin-commonjs rollup-plugin-typescript2

3. Set up TypeScript configuration:

Create a tsconfig.json file:

{
"compilerOptions": {
"target": "es5",
"module": "esnext",
"declaration": true,
"declarationDir": "./dist/types",
"outDir": "./dist",
"jsx": "react",
"strict": true,
"esModuleInterop": true,
"skipLibCheck": true
},
"include": ["src"]
}

Step 2: Create Your Components

1. Create the folder structure:

mkdir -p src/components/Button src/components/Card

2. Create the Button component:

src/components/Button/Button.tsx

import React from 'react';

interface ButtonProps {
label: string;
onClick: () => void;
}

const Button: React.FC<ButtonProps> = ({ label, onClick }) => {
return <button onClick={onClick}>{label}</button>;
};

export default Button;

src/components/Button/index.ts

export { default } from './Button';

3. Create the Card component:

src/components/Card/Card.tsx

import React from 'react';

interface CardProps {
title: string;
content: string;
}

const Card: React.FC<CardProps> = ({ title, content }) => {
return (
<div>
<h2>{title}</h2>
<p>{content}</p>
</div>
);
};

export default Card;

src/components/Card/index.ts

export { default } from './Card';

4. Create the main export file:

src/index.ts

export { default as Button } from './components/Button';
export { default as Card } from './components/Card';

Step 3: Configure Rollup

1. Create a rollup.config.js file:

import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import typescript from 'rollup-plugin-typescript2';

export default {
input: 'src/index.ts',
output: [
{
file: 'dist/index.cjs.js',
format: 'cjs',
sourcemap: true,
},
{
file: 'dist/index.esm.js',
format: 'esm',
sourcemap: true,
},
],
plugins: [
resolve(),
commonjs(),
typescript({ tsconfig: './tsconfig.json' }),
],
external: ['react', 'react-dom'],
};

Step 4: Build and Publish

1. Get your package.json file right.

{
"name": "your-lib-name",
"version": "1.0.0",
"description": "A reusable React component library",
"main": "dist/index.js",
"module": "dist/index.esm.js",
"types": "dist/index.d.ts",
"files": [
"dist"
],
"style": "dist/index.css",
"scripts": {
"build": "rollup -c"
},
"keywords": [],
"author": "",
"license": "ISC",
"peer-dependencies": {
"react": "^18.3.1",
"react-dom": "^18.3.1",
},
"devDependencies": {
... all other dependencies for development
}
}

2. Build your library:

npm run build

2. Create an npm account if you don't have one already at npmjs.com.

3. Login to npm:

npm login

4. Publish your package:

npm publish --access public

And that's it! Your React component library with a Card and Button component is now published on npm. You can install it in any project using:

npm install your-package-name

https://github.com/jonclawson/hey-react-components

https://www.npmjs.com/package/hey-react-components

Try on Stackblitz

jonclawson's blog