stand-with-palestine v1.2.3

Stand With Palestine 🇵🇸

Overview

The Stand With Palestine (SWP) library is a lightweight JavaScript tool designed to show solidarity with Palestine. It allows the easy addition of a customizable banner to your website, either at the top or bottom of the page. The banner is designed to be non-intrusive and does not affect the website's load time, thanks to the use of requestAnimationFrame for rendering.

Features

• Customizable position, theme, and content
• Lightweight and non-blocking
• Easy integration with any website or JavaScript framework (e.g., Vue, React, Next.js, Nuxt.js)
• TypeScript support

Installation

Via CDN

Include the script directly from the CDN in your HTML:

<script src="https://unpkg.com/stand-with-palestine@latest/dist/main.umd.js"></script>
<script>
  swpInit({
    rootClassName: 'min-h-12', // If you're using Tailwind CSS or custom CSS
    animate: false,
    theme: 'dark',
  });
</script>

Via NPM

Install the package using npm or yarn:

npm install stand-with-palestine
# or
yarn add stand-with-palestine

Then import and initialize in your JavaScript or TypeScript file:

import { swpInit } from 'stand-with-palestine';

swpInit({
  rootClassName: 'min-h-12',
  animate: false,
  theme: 'dark',
});

Configuration

The swpInit function accepts an optional SWPConfig object that allows you to customize the appearance and behavior of the banner.

SWPConfig Type Definition

Initialization Example

swpInit({
  title: "Support Palestine",
  buttonText: "Learn More",
  buttonLink: "https://example.com",
  theme: "dark",
  position: "bottom",
  animate: true,
  sticky: true,
});

Integration with Frameworks

The SWP library can be seamlessly integrated with various JavaScript frameworks:

Vue

import { swpInit } from 'stand-with-palestine';

export default {
  mounted() {
    swpInit(/* Optional Config Here */);
  }
}

React

import React, { useEffect } from 'react';
import { swpInit } from 'stand-with-palestine';

function App() {
  useEffect(() => {
    swpInit(/* Optional Config Here */);
  }, []);

  return (
    <div className="App">
      {/* Your App Content */}
    </div>
  );
}

export default App;

Next.js & Nuxt.js

You can include the initialization in your main layout or a specific page, similar to the React and Vue examples above, using useEffect (Next.js) or mounted (Nuxt.js) to ensure it runs on the client side.

Contributions

We welcome contributions from the community! If you'd like to contribute to the Stand With Palestine project.

Questions or Suggestions?

Feel free to open an issue in the GitHub repository if you have any questions, suggestions, or feedback. We're here to make this project as effective as possible in showing solidarity with Palestine. Thank you for considering contributing to the Stand With Palestine project. Your support is greatly appreciated!