Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/abrahamcalsin/react-github-fork-banner
Add a github banner with a link to the fork or repository of your project.
https://github.com/abrahamcalsin/react-github-fork-banner
npm storybook styled-components tsdx
Last synced: about 1 month ago
JSON representation
Add a github banner with a link to the fork or repository of your project.
- Host: GitHub
- URL: https://github.com/abrahamcalsin/react-github-fork-banner
- Owner: abrahamcalsin
- License: mit
- Created: 2022-01-05T01:40:00.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2023-02-16T04:56:34.000Z (almost 2 years ago)
- Last Synced: 2024-10-18T18:47:10.716Z (2 months ago)
- Topics: npm, storybook, styled-components, tsdx
- Language: TypeScript
- Homepage: https://npmjs.com/react-github-fork-banner
- Size: 1.23 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React GitHub Fork Banner
react-github-fork-banner is an npm package that allows you to add a github banner with a link linked to your project's fork or repository. You can give it a super custom use as a normal react component.
#
## Installation 🔨
To use this package in your project, you must install it via npm or yarn, depending on what you use.
```bash
# Using npm
npm install --save react-github-fork-banner@latest
# Using yarn
yarn add react-github-fork-banner@latest
```
#
## Usage 🚀
```jsx
import React from 'react';
import { GithubForkBanner } from 'react-github-fork-banner';
function App() {
return (
<>
My App
>
);
}
export default App;
```
Fill in the missing values for each property.
These are the properties that can be added:
| Property Name | Type | Default Value | Values you can use | Description |
| :-----------: | :----: | :-----------: | --------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
| direction | String | 'right' | "left" and "right" | Define the Banner direction. |
| size | Number | 98 | Only numeric type values | Define the width and height of the Banner. |
| animation | String | none | left-ear, right-ear, ears, tail, tail-&-leftEar, tail-&-rightEar, all | Define the Octocat animation. |
| customHref | String | '/' | Links href | This field is mandatory, you will get an error if you do not add its value, this to avoid giving an inadequate and useless use to the component. |
| bannerColor | String | '#000' | HEX, HSL, CSS( RGB & RGBA ) | Define the color of the Banner. |
| octoColor | String | '#fff' | HEX, HSL, CSS( RGB & RGBA ) | Defines the color of the Octocat. |
#
## Keep in touch with me ✨
- GitHub: [@abrahamcalsin](https://github.com/abrahamcalsin)
- Twitter: [@abrahamcalsin](https://twitter.com/abraham_calsin)
## License 🔑
This project is licensed under MIT license.