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 |
|
7 | 1. Install through: `npm install --save react-github-login-button`
|
8 |
|
9 | 2. Import `GithubButton` from `react-github-login-button`:
|
10 |
|
11 | ```javascript
|
12 | import GithubButton from 'react-github-login-button'
|
13 | ```
|
14 |
|
15 | 3. 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
|
28 | oneOf([ '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
|
54 | Boolean
|
55 | ```
|
56 |
|
57 | ##### Default
|
58 | ```js
|
59 | false
|
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
|
74 | String
|
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
|
91 | Override the 'Sign in with Github' words with another string.
|
92 |
|
93 | ## Builds
|
94 |
|
95 | Most 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 |
|
97 | If 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 |
|
99 | It 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 |
|
107 | Note: 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).
|