UNPKG

2.8 kBMarkdownView Raw
1# react-github-login-button
2
3## Getting Started
4
5`react-github-login-button` is universal, so it can be used client-side or server-side.
6
71. Install through: `npm install --save react-github-login-button`
8
92. Import `GithubButton` from `react-github-login-button`:
10
11 ```javascript
12 import GithubButton from 'react-github-login-button'
13 ```
14
153. Use `GithubButton` component:
16
17 ```javascript
18 <GithubButton
19 onClick={() => { console.log('Github button clicked') }}
20 />
21 ```
22
23## Props
24
25### type
26##### PropType
27```js
28oneOf([ 'light', 'dark' ])
29```
30
31##### Default
32```js
33'dark'
34```
35
36##### Example
37
38```js
39<GithubButton
40 type="light" // can be light or dark
41 onClick={() => { console.log('Github button clicked') }}
42/>
43```
44
45##### Description
46`'light'` or `'dark'` for the different github styles (defaults to `dark`)
47
48
49### disabled
50`disabled` - whether or not button is disabled
51
52##### PropType
53```js
54Boolean
55```
56
57##### Default
58```js
59false
60```
61
62##### Example
63
64```javascript
65<GithubButton
66 disabled // can also be written as disabled={true} for clarity
67 onClick={() => { console.log('this will not run on click since it is disabled') }}
68/>
69```
70
71### label
72##### PropType
73```js
74String
75```
76##### Default
77```js
78'Sign in with Github'
79```
80
81##### Example
82
83```javascript
84<GithubButton
85 label='Be Cool'
86 onClick={() => { console.log('Github button clicked') }}
87/>
88```
89
90##### Description
91Override the 'Sign in with Github' words with another string.
92
93## Builds
94
95Most commonly people consume `react-github-login-button` as a [CommonJS module](http://webpack.github.io/docs/commonjs.html). This module is what you get when you import redux in a Webpack, Browserify, or a Node environment.
96
97If you don't use a module bundler, it's also fine. The `react-github-login-button` npm package includes precompiled production and development [UMD builds](https://github.com/umdjs/umd) in the [dist folder](https://unpkg.com/react-github-login-button@latest/dist/). They can be used directly without a bundler and are thus compatible with many popular JavaScript module loaders and environments. For example, you can drop a UMD build as a `<script>` tag on the page. The UMD builds make Redux Firestore available as a `window.ReduxFirestore` global variable.
98
99It can be imported like so:
100
101```html
102<script src="../node_modules/react-github-login-button/dist/react-github-login-button.min.js"></script>
103<!-- or through cdn: <script src="https://unpkg.com/react-github-login-button@latest/dist/react-github-login-button.min.js"></script> -->
104<script>console.log('redux firestore:', window.ReactGithubButton)</script>
105```
106
107Note: In an effort to keep things simple, the wording from this explanation was modeled after [the installation section of the Redux Docs](https://redux.js.org/#installation).