Skip to content

Latest commit

 

History

History
99 lines (75 loc) · 5.11 KB

README.md

File metadata and controls

99 lines (75 loc) · 5.11 KB
Raw

Help Ukraine 🇺🇦

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

image image image

Getting Started:

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

yarn add help-ukraine
  1. 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>
  );
}
  1. 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.