react-nexalib-popup v1.0.9
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:
- 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.