React Github Corners

A small React wrapper around @tholman‘s github-corners. See the example site to see the corner live with the smal animations.

Installation

Add react-github-corners to your project from npm using your favorite package management tool

Usage

If you have Webpack configured to load CSS and transpile JSX, this can simply be imported and used. This also plays nice with create-react-app.

import GithubCorner from 'react-github-corners'
import 'react-github-corners/dist/GithubCorner.css'
const App = (props) => (<GithubCorner></GithubCorner>)

You can override the color using the color and backgroundColor props:

const App = (props) => (<GithubCorner color="orange" backgroundColor="white"></GithubCorner>)

Class names try to follow BEM principles, so you can dig around the source code to find the class names and take direct control of the components using plain CSS. You can also override the SVG style by passing an svgStyle attribute to your component:

const App = (props) => (<GithubCorner svgStyle={{"stroke": "blue"}})

If you want to help this library support other build configurations, file an issue.

API

Props

url (required): the URL of your project, e.g. https://github.com/github/gitignore

backgroundColor (default: "black"): the background color of the corner

color (default: "white"): the color of the octocat

svgStyle (default: {}): override the style of the SVG

target (default: "_self") : override the target attribute of the link

License

From github-corners

Naturally, these aren’t built by GitHub, or endorsed by them.

Ditto for this.