Simple Component Library

A collection of reusable React components including buttons and dropdowns that can be imported into Replit, VS Code, and other development environments.

Installation

npm install nicolas-simple-button

Components

SimpleButton

A customizable button component with multiple variants and sizes.

Dropdown

A fully-featured dropdown component with keyboard navigation and accessibility support.

Usage

import React, { useState } from 'react';
import { SimpleButton, Dropdown } from 'nicolas-simple-button';

function App() {
  const [selectedValue, setSelectedValue] = useState('');

  const options = [
    { value: 'option1', label: 'Option 1' },
    { value: 'option2', label: 'Option 2' },
    { value: 'option3', label: 'Option 3' },
  ];

  const handleClick = () => {
    alert('Button clicked!');
  };

  const handleDropdownChange = (value) => {
    setSelectedValue(value);
  };

  return (
    <div>
      <Dropdown
        label="Select an option"
        placeholder="Choose..."
        options={options}
        value={selectedValue}
        onChange={handleDropdownChange}
      />
      
      <SimpleButton variant="primary" onClick={handleClick}>
        Click me!
      </SimpleButton>
    </div>
  );
}

export default App;

SimpleButton Props

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

Dropdown Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | label | string | - | The label for the dropdown | | placeholder | string | 'Select an option' | Placeholder text when no option is selected | | options | DropdownOption[] | [] | Array of options for the dropdown | | value | string | - | The currently selected value | | onChange | (value: string, option: DropdownOption) => void | - | Callback when selection changes | | disabled | boolean | false | Whether the dropdown is disabled | | className | string | '' | Additional CSS class names | | required | boolean | false | Whether the dropdown is required | | error | string | - | Error message to display |

DropdownOption

interface DropdownOption {
  value: string;
  label: string;
  disabled?: boolean;
}

Development

To build this package:

npm install
npm run build

To watch for changes during development:

npm run dev

Features

• TypeScript support
• Three variants: primary, secondary, danger
• Three sizes: small, medium, large
• Disabled state support
• Accessible and semantic HTML
• Modern styling with hover effects
• Lightweight with zero dependencies (except React peer dependency)

Using in Replit

1. In your Replit project, open the Shell and run:

   npm install @nicolas-piquita/simple-button

2. Import and use in your React components:

   import { SimpleButton } from '@nicolas-piquita/simple-button';

Using in VS Code

1. In your VS Code terminal:

   npm install @nicolas-piquita/simple-button

2. Import in your React files and enjoy full TypeScript support with autocomplete.

License

MIT