react-nexalib-popup/README.md

Elevate your React applications with NexaLib – the go-to npm package for crafting dynamic and user-friendly popup modals. With NexaLib, creating customizable and responsive popups becomes a breeze. Streamline your coding and enhance user experience – Nexa

# react-nexalib-popup

Enhance your React applications with dynamic and user-friendly popup modals using `react-nexalib-popup`. Simplify popup creation, offer customizable options, and provide responsive modals seamlessly. Make your popups stand out and elevate user experience with minimal effort.

## Installation

To use `react-nexalib-popup` in your React project, you need to install it using npm:

```bash
npm install react-nexalib-popup
```

By default, `react-nexalib-popup` utilizes Tailwind CSS classes to style the popups. If your project doesn't use **Tailwind CSS**, you can include the provided CSS file to your project:

1. import the CSS file in Your Project:

```bash
import 'react-nexalib-popup/build/nexalib.popup.css';
```

## Usage

1.Import the `Popup` component from react-nexalib-popup:

`import Popup from 'react-nexalib-popup';`

2.Integrate the `Popup` component within your React application:

```
function App() {
  const popupConfig = {
    footerbutton: true,
    footerbuttontext: 'OK',
    color: '#FF5733',
  };

  return (
    <div>
      <button popup-btn-1="true" className='px-5 py-2 bg-yellow-500 text-white'>Open</button>
      <button popup-btn-2="true">Open</button>
      <Popup targetItem="1" popupConfig={popupConfig}>
        {/* Content for Popup 1 */}
      </Popup>
      <Popup targetItem="2" popupConfig={popupConfig}>
        {/* Content for Popup 2 */}
      </Popup>
    </div>
  );
}

export default App;

```

Ensure the triggering button has the attribute `popup-btn-X="true"`, where X corresponds to the target item number.

For each Popup component, set the `targetItem` prop to the same value as the triggering button's `popup-btn-X` attribute. This associates the configuration in `popupConfig` with the corresponding popup.

## Configuration

The `popupConfig` object allows you to customize the appearance and behavior of your popups. Available options include:

**footerbutton**: Enable or disable the footer button.
**footerbuttontext**: Text for the footer button.
**color**: Color customization for the popup.
Customize these options to tailor your popup modals to your project's requirements.

## Contributing

We welcome contributions! If you find any issues or want to suggest improvements, feel free to submit a pull request or open an issue on our [GitHub repository](https://github.com/ArishN/react-nexalib-popup-npm).