The Free Palestine Banner
is a customizable React component designed to provide a stylish and flexible banner for your website or application. This package allows you to easily integrate a free palestine banner in your web app with configurable text, button options, and styles.
- Customizable Title: Set a custom title for the banner or use the default message.
- Conditional Button Display: Show or hide the button based on the
showButton
prop. - Custom Button Text: Define custom text for the button.
- Custom Button Link: Set a custom URL for the button.
- Custom Button Class: Apply additional styling to the button with a custom CSS class.
- Custom Banner Class: Add a custom CSS class to the entire banner component.
- Pre-defined Styles: Includes default styles for layout, text, and buttons.
Install the free-ps-banner
npm package using npm or yarn:
npm install free-ps-banner
or
yarn add free-ps-banner
To use the Banner
component in your React project:
-
Import the Component:
import Banner from 'free-ps-banner'; import React from 'react';
-
Add the Component to Your JSX:
function App() {
return (
<div className="App">
<Banner
title="Support Human Rights"
showButton={true}
customButtonText="Contribute Now"
customButtonLink="https://example.com/donate"
customButtonClassName="my-button-class"
customClassName="my-banner-class"
/>
</div>
);
}
export default App;
title?: string
- Optional: Set the banner's title text.showButton?: boolean
- Optional: Show or hide the button (default istrue
).customButtonText?: string
- Optional: Set custom text for the button.customButtonLink?: string
- Optional: Set a custom URL for the button.customButtonClassName?: string
- Optional: Apply a custom CSS class to the button.customClassName?: string
- Optional: Apply a custom CSS class to the entire banner.
To contribute or make changes to this package:
-
Clone the Repository:
git clone https://github.com/Bashamega/free-ps-banner
-
Install Dependencies:
npm install
Feel free to open issues or submit pull requests. Contributions are welcome!