{"id":18807109,"url":"https://github.com/mshenfield/react-github-corners","last_synced_at":"2026-01-08T23:30:31.475Z","repository":{"id":20294241,"uuid":"89373694","full_name":"mshenfield/react-github-corners","owner":"mshenfield","description":"A fresher \"Fork me on Github\" callout ported to React","archived":false,"fork":false,"pushed_at":"2023-01-24T18:31:04.000Z","size":264,"stargazers_count":2,"open_issues_count":4,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-04-14T06:39:36.873Z","etag":null,"topics":["github-corner","react"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mshenfield.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-04-25T14:59:22.000Z","updated_at":"2021-01-05T04:58:51.000Z","dependencies_parsed_at":"2023-02-14T00:31:47.562Z","dependency_job_id":null,"html_url":"https://github.com/mshenfield/react-github-corners","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mshenfield%2Freact-github-corners","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mshenfield%2Freact-github-corners/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mshenfield%2Freact-github-corners/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mshenfield%2Freact-github-corners/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mshenfield","download_url":"https://codeload.github.com/mshenfield/react-github-corners/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239742418,"owners_count":19689309,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["github-corner","react"],"created_at":"2024-11-07T22:50:51.770Z","updated_at":"2026-01-08T23:30:30.987Z","avatar_url":"https://github.com/mshenfield.png","language":"JavaScript","readme":"# React Github Corners\nA small React wrapper around [@tholman](https://github.com/tholman)'s [github-corners](https://github.com/tholman/github-corners). See [the example site](http://tholman.com/github-corners/) to see the corner live with the smal animations.\n\n## Installation\nAdd `react-github-corners` to your project from npm using your favorite package management tool\n\n## Usage\nIf you have [Webpack](https://webpack.js.org/) configured to [load CSS](https://webpack.github.io/docs/stylesheets.html) and [transpile JSX](https://github.com/babel/babel-loader), this can simply be imported and used. This also plays nice with [create-react-app](https://github.com/facebookincubator/create-react-app).\n\n```js\nimport GithubCorner from 'react-github-corners'\nimport 'react-github-corners/dist/GithubCorner.css'\n\nconst App = (props) =\u003e (\u003cGithubCorner/\u003e)\n```\n\nYou can override the color using the `color` and `backgroundColor` props:\n\n```js\nconst App = (props) =\u003e (\u003cGithubCorner color=\"orange\" backgroundColor=\"white\"/\u003e)\n```\n\nClass names try to follow [BEM](http://getbem.com/introduction/) 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:\n\n```js\nconst App = (props) =\u003e (\u003cGithubCorner svgStyle={{\"stroke\": \"blue\"}})\n```\n\nIf you want to help this library support other build configurations, [file an issue](issues).\n\n## API\n**Props**\n\n`url` _(required)_: the URL of your project, e.g. https://github.com/github/gitignore\n\n`backgroundColor` _(default: `\"black\"`)_: the background color of the corner\n\n`color` _(default: `\"white\"`)_: the color of the octocat\n\n`svgStyle` _(default: `{}`)_: override the style of the SVG\n\n`target` *(default: `\"_self\"`)* : override the target attribute of the link\n\n## License\nFrom [github-corners](https://github.com/tholman/github-corners)\n\u003e Naturally, these aren't built by GitHub, or endorsed by them.\n\nDitto for this.\n\nCopyright (c) 2016 Tim Holman\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmshenfield%2Freact-github-corners","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmshenfield%2Freact-github-corners","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmshenfield%2Freact-github-corners/lists"}