Help Ukraine 🇺🇦

Stand with Ukraine and share the latest news, resources, and charitable information with this customizable badge.

• View package details on npm.
• View interactive demo on CodeSandbox.

Getting Started:

1. Install the help-ukraine package from your terminal via npm or Yarn.

npm install help-ukraine

yarn add help-ukraine

2. Import the package and place the component in the desired file. For example:

import React from 'react';
import { HelpUkraine } from 'help-ukraine';

function App() {
  return (
    <div>
      <HelpUkraine />
    </div>
  );
}

3. Customize the link, text, and/ or styles to your liking using props. See table below for more info.

<HelpUkraine
  link="https://ukrainewar.carrd.co/"
  text="Stand With Ukraine!"
  size={16}
  color="#FFF"
  bg="#000"
  pos="top right"
  pX={32}
  pY={8}
  mX={8}
  mY={8}
  radius={12}
/>

Available Options:

Prop	Type	Default	Description
link	string	UN Crisis Relief	Where the component links to. See the "Verified Resources" section for more organizations that could use your support.
text	string	'Help Ukraine'	The text diplayed in the component.
size	number	14	The size of the text displayed in the component (in pixels).
color	string	'NavyBlue'	The color of the text displayed in the component.
bg	string	'Gold'	The background color of the component.
pos	string literal	'bottom right'	The position of the component. Must be one of the following: 'bottom right', 'bottom left', 'top right', or 'top left'.
pX	number	16	The horizonal padding of the component (in pixels).
pY	number	4	The vertical padding of the component (in pixels).
mX	number	16	The horizonal margin/ space outside the component (in pixels).
mY	number	16	The vertical margin/ space outsde the component (in pixels).
radius	number	4	The border radius/ roundness of the component (in pixels).

---

Contributions:

I appreciate your interest in this project and welcome you to contribute to it. For more details, please see the CONTRIBUTING.md file.

---

License:

Licensed under MIT. For more information, please see the LICENSE.md file.

---

Verified Resources:

Here are some additional resources and organizations that could use your support during this time.

• Red Cross
• Sunflower of Peace
• Revived Soldiers Ukraine
• Voices of Children
• Care International
• Come Back Alive
• Army SOS
• Razom for Ukraine
• Doctors Without Borders