1.0.3 • Published 2 years ago
help-ukraine v1.0.3
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-ukrainepackage from your terminal via npm or Yarn.
npm install help-ukraineyarn 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.