my-ui-library1

my-ui-library1 is a React UI component library that provides reusable components such as Button, Card, Input, and Modal. These components simplify the creation of common UI elements in your React applications.

=================================================================================================================================================================================================================================

Installation

To install the library, run:

bash

Copy code

npm install my-ui-library1

====================================================================================

Components

This library includes the following components:

• Button
• Card
• Input
• Modal

===========================================================================================================================================

1. Button

A customizable button component that accepts a label, click handler, and button type.

=========================================================================================

Usage

javascript

import React from 'react';
import Button from 'my-ui-library1';

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

export default App;

===========================================================================================================================================================================================================================================================

Props

Prop

Type

Description

Default

label

string

The text to display inside the button

-

onClick

function

Callback function when the button is clicked

-

type

string

The button type (e.g., button, submit)

button

==========================================================================================================================================================================================================================================================

2. Card

A simple card component that acts as a container for any content passed as children.

========================================================================================

Usage

javascript

Copy code

import React from 'react';
import Card from 'my-ui-library1';

const App = () => {
  return (
    <Card>
      <h2>Card Title</h2>
      <p>This is some content inside the card.</p>
    </Card>
  );
};

export default App;

================================================================================================================================================================================================================================================================

Props

Prop

Type

Description

Default

children

ReactNode

The content to be displayed inside the card

-

=====================================================================================================================

3. Input

A simple input component for user text input with an onChange handler for capturing input values.

=======================================================================================================

Usage

javascript

import React, { useState } from 'react';
import Input from 'my-ui-library1';

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

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

export default App;

==============================================================================================================================================================================================================================================================================================================================

Props

Prop

Type

Description

Default

placeholder

string

Placeholder text for the input

-

onChange

function

Function called when the input value changes

-

==================================================================================================================================================================================

4. Modal

A modal component that displays content in an overlay and can be closed via a close handler.

================================================================================================

Usage

javascript

import React, { useState } from 'react';
import Modal from 'my-ui-library1';

const App = () => {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div>
      <button onClick={() => setIsOpen(true)}>Open Modal</button>
      <Modal isOpen={isOpen} onClose={() => setIsOpen(false)}>
        <h2>Modal Title</h2>
        <p>This is modal content.</p>
      </Modal>
    </div>
  );
};

export default App;

===================================================================================================================================================================================================================================================================================================================================================================================================================================================================

Props

Prop

Type

Description

Default

isOpen

boolean

Controls whether the modal is visible

-

onClose

function

Function to call when modal is closed

-

children

ReactNode

Content to display inside the modal

-

===============================================================================================================================================================================================================================================

CSS

Each component comes with basic CSS for default styling. You can override these styles by using the following CSS class names:

• Button: .my-button
• Card: .my-card
• Input: .my-input
• Modal: .my-modal, .modal-content, .close

If needed, you can customize the styles by adding your own CSS rules to target these classes.

=================================================================================================================================================================================================================================================================================================================================================================================

License

This project is licensed under the ISC License.

===================================================