React Rollup Package Template

🚀 A modern React library template built with TypeScript, Rollup, and best practices for reusable components and libraries.

Features

• ⚡ Rollup for optimized builds.
• 📦 Outputs in CommonJS and ESModule formats.
• 🔒 Built-in TypeScript support.

Getting Started

1. Clone the Template

git clone https://github.com/kawaljain/react-rollup-package-template.git
cd react-rollup-package-template

2. Install Dependencies

npm install

Development Workflow

Available Scripts

• Build the Library

npm run build

Outputs both cjs and esm formats in the dist/ folder.

Folder Structure

react-library-template/
├── src/                        # Source files for the library
│   ├── components/             # Reusable React components
|   |   |──Dummy
│   │   |  └── Dummy.tsx        # Example Dummy component
│   │   |  └── Dummy.types.tsx  # Example Dummy component types
│   │   |  └── index.ts         # Dummy component entry point
│   │   |  └── style.css        # Contains css for dummy component
│   |   ├── index.ts            # Component entry point
│   ├── index.ts                # Library entry point
├── dist/                       # Compiled output (generated after build)
├── rollup.config.js            # Rollup configuration for building the library
├── package.json                # NPM metadata and scripts
├── README.md                   # Documentation for the library
├── tsconfig.json               # TypeScript configuration file
├── LICENSE                     # Open-source license file
└── .gitignore                  # Files and directories to be ignored by Git

Key Folders and Files

• src/: Contains all source files, including components and utilities.
• dist/: The build output folder (ignored in version control).
• rollup.config.js: Rollup configuration file to bundle your library.
• tsconfig.json: TypeScript configuration to enable strict typing and generate type declarations.
• package.json: Defines project metadata, dependencies, and scripts.
• .gitignore: Specifies files and folders to exclude from version control.

Key Folders and Files

rollup.config.js

• Rollup is a module bundler used to create efficient and optimized builds of your library.
• This file configures the input source (src/index.ts) and outputs (dist/ folder) in both CommonJS and ESModule formats.
• It includes plugins like:
  • @rollup/plugin-node-resolve: Allows importing from node_modules.
  • @rollup/plugin-commonjs: Converts CommonJS modules to ESModules.
  • @rollup/plugin-typescript: Transpiles TypeScript files to JavaScript.
  • rollup-plugin-terser: Minifies the output for production.

src/

• Contains all the source code for your library, including reusable components and utilities.
• index.ts: Acts as the entry point for your library, exporting components and utilities.

dist/

• Stores the compiled and bundled output, including:
  • CommonJS (.cjs.js): For Node.js environments.
  • ESModules (.esm.js): For modern JavaScript bundlers like Webpack or Vite.
  • Type Declarations (.d.ts): Generated by TypeScript for type safety.

Other Key Files

• tsconfig.json: Configures TypeScript for strict typing and output generation.
• package.json: Specifies the entry points for your library, dependencies, and useful scripts.
• .gitignore: Prevents unnecessary files and folders like node_modules and dist/ from being committed to version control.

Why Use Rollup?

• Tree-shaking: Removes unused code, ensuring your library is lightweight.
• Multi-format Support: Builds libraries in both CommonJS and ESModule formats, ensuring compatibility across environments.
• Plugin Ecosystem: Supports powerful plugins for TypeScript, minification, and resolving node modules.
• Optimized for Libraries: Designed specifically to bundle libraries rather than full applications.

Publishing to NPM

1. Update package.json:

   • Set the name, version, and description fields.
   • Ensure main and module point to dist/cjs/index.js and dist/esm/index.js.

2. Log in to NPM:

npm login

2. Publish your library::

npm publish --access public

Contributing

We welcome contributions! To contribute:

1. Fork the repository.

2. Create a new branch

git checkout -b feature/your-feature-name

3. Commit your changes

git commit -m "Add your feature"

3. Push to your branch and create a pull request.

License

This project is licensed under the MIT License. See the LICENSE file for details.