Package Exports

@gthangaraj-fr/react-button-library
@gthangaraj-fr/react-button-library/dist/index.esm.js
@gthangaraj-fr/react-button-library/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@gthangaraj-fr/react-button-library) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

React Button Library

A simple, customizable React button component library.

Installation

npm install @gthangaraj-fr/react-button-library

Usage

import React from "react";
import { Button } from "@gthangaraj-fr/react-button-library";

function App() {
  return (
    <div>
      <Button variant="primary" size="medium" onClick={() => alert("Clicked!")}>
        Click Me
      </Button>
    </div>
  );
}

Props

Prop	Type	Default	Description
`children`	`React.ReactNode`	-	The content to display inside the button
`variant`	`'primary' \| 'secondary' \| 'outline'`	`'primary'`	Button variant style
`size`	`'small' \| 'medium' \| 'large'`	`'medium'`	Button size
`disabled`	`boolean`	`false`	Is the button disabled?
`onClick`	`(event: React.MouseEvent<HTMLButtonElement>) => void`	-	Click handler
`className`	`string`	`''`	Additional CSS class names
`type`	`'button' \| 'submit' \| 'reset'`	`'button'`	Button type

Examples

Variants

<Button variant="primary">Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="outline">Outline</Button>

Sizes

<Button size="small">Small</Button>
<Button size="medium">Medium</Button>
<Button size="large">Large</Button>

Disabled

<Button disabled>Disabled Button</Button>

Development

Scripts

npm run build - Build the library
npm run build:watch - Build in watch mode
npm run test - Run tests
npm run storybook - Start Storybook development server
npm run build-storybook - Build Storybook for production
npm run version:patch - Bump patch version (1.0.0 → 1.0.1)
npm run version:minor - Bump minor version (1.0.0 → 1.1.0)
npm run version:major - Bump major version (1.0.0 → 2.0.0)
npm run publish:manual - Build and publish manually

Building

The library is built using Rollup and outputs:

CommonJS (dist/index.js)
ES Modules (dist/index.esm.js)
TypeScript declarations (dist/index.d.ts)

Publishing

Automated (Recommended)

Use the GitHub Actions workflow for automated publishing:

Go to Actions tab → "Patch and Publish"
Click "Run workflow"
Select version bump type (patch/minor/major)
The workflow will handle building, versioning, changelog generation, and publishing

See WORKFLOW_SETUP.md for setup instructions.

Manual Publishing

npm run build
npm version patch  # or minor/major
npm publish --access public
git push origin main --follow-tags

License

MIT