🇺🇦
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:
- Install the
help-ukraine
package from your terminal via npm or Yarn.
npm install help-ukraine
yarn add help-ukraine
- 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>
);
}
- 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.