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:

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:

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.