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

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;

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.