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