@emzra/component-library NPM

@emzra/component-library

A collection of reusable React components.

Demo App

Badges

npm version license size GitHub issues

Installation

Install the component library via npm:

npm install @emzra/component-library

Components

Button

A simple button component.

Props

label (string): The text to display on the button.
onClick (function): The function to call when the button is clicked.

Usage

import React from 'react';
import { Button } from '@emzra/component-library';

const App = () => (
  <Button label="Click me" onClick={() => alert('Button clicked!')} />
);

export default App;

Input

A basic input field component.

Props

type (string): The type of the input (default: 'text').
placeholder (string): The placeholder text for the input.
value (string): The value of the input.
onChange (function): The function to call when the input value changes.

Usage

import React, { useState } from 'react';
import { Input } from '@emzra/component-library';

const App = () => {
  const [value, setValue] = useState('');

  return (
    <Input
      type="text"
      placeholder="Enter text"
      value={value}
      onChange={(e) => setValue(e.target.value)}
    />
  );
};

export default App;

Checkbox

A checkbox component with label support.

Props

label (string): The text to display next to the checkbox.
checked (boolean): Whether the checkbox is checked.
onChange (function): The function to call when the checkbox state changes.

Usage

import React, { useState } from 'react';
import { Checkbox } from '@emzra/component-library';

const App = () => {
  const [checked, setChecked] = useState(false);

  return (
    <Checkbox
      label="Accept terms"
      checked={checked}
      onChange={(e) => setChecked(e.target.checked)}
    />
  );
};

export default App;

RadioButton

A radio button component with group support.

Props

name (string): The name of the radio button group.
value (string): The value of the radio button.
checked (boolean): Whether the radio button is checked.
onChange (function): The function to call when the radio button state changes.

Usage

import React, { useState } from 'react';
import { RadioButton } from '@emzra/component-library';

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

  return (
    <div>
      <RadioButton
        name="gender"
        value="Male"
        checked={selectedValue === 'Male'}
        onChange={(e) => setSelectedValue(e.target.value)}
      />
      <RadioButton
        name="gender"
        value="Female"
        checked={selectedValue === 'Female'}
        onChange={(e) => setSelectedValue(e.target.value)}
      />
    </div>
  );
};

export default App;

Select

A select (dropdown) component.

Props

options (string[]): The options to display in the dropdown.
value (string): The selected value.
onChange (function): The function to call when the selected value changes.

Usage

import React, { useState } from 'react';
import { Select } from '@emzra/component-library';

const App = () => {
  const [selectedOption, setSelectedOption] = useState('');

  return (
    <Select
      options={['Option 1', 'Option 2']}
      value={selectedOption}
      onChange={(e) => setSelectedOption(e.target.value)}
    />
  );
};

export default App;

TextArea

A multi-line text input component.

Props

placeholder (string): The placeholder text for the textarea.
value (string): The value of the textarea.
onChange (function): The function to call when the textarea value changes.

Usage

import React, { useState } from 'react';
import { TextArea } from '@emzra/component-library';

const App = () => {
  const [value, setValue] = useState('');

  return (
    <TextArea
      placeholder="Enter text"
      value={value}
      onChange={(e) => setValue(e.target.value)}
    />
  );
};

export default App;

Card

A card component for displaying content in a structured format.

Props

title (string): The title of the card.
content (string): The content of the card.

Usage

import React from 'react';
import { Card } from '@emzra/component-library';

const App = () => (
  <Card title="Card Title" content="Card Content" />
);

export default App;