Github-reaction-button NPM

github-reaction-button

Reaction button that stores reaction data in github issues.

TODO

Custom renderer
Test code
Function to add comment text by user
Embed url in comment

Demo

https://yusukeshibata.github.io/github-reaction-button/

screenshot

Install

<script src="https://unpkg.com/github-reaction-button/dist/githubreactionbutton.js"></script>

or from npm

npm install github-reaction-button

Usage

const reaction = new GithubReactionButton({

  // required config
  client_id: 'Github Application Client ID',
  client_secret: 'Github Application Client Secret',
  repo: 'Github repo',
  owner: 'Github repo owner',
  issue: 1, // issue number
  id: 'unique_id_to_record_reaction',

  // optional config(please set if your embedding URL is different from redirect_uri)
  redirect_uri: 'Redirect URI you set on Github Application setting'

})
reaction.render('reaction-container') // container element's id

// render to other element(you can override config with second argument)
reaction.render('reaction-container2', { id: 'unique_id_2' })

Usage as react component

import GithubReactionButton from 'github-reaction-button'

const Reaction = new GithubReactionButton({ ... })

render() {
  // config will be override with component's props
  return (<Reaction.component id='test-1' />)
}

Options

client_id String
Required. Github Application Client ID.
client_secret String
Required. Github Application Client Secret.
repo String
Required. Github repository.
issue Number
Required. Github issue number to store user's reaction.
owner String
Required. Github repository owner. Can be personal user or organization.
id String
Required. Embeding reaction component's unique id.
redirect_uri String
Default: location.href.
Specify redirect uri if your App's redirect_uri you set on Github application setting isn't same as embedding url.

renderer React component

Default: Default render

// all props set on `Reaction.component` will be passed to this.props
const CustomComponent = ({ error, busy, count, reaction, ...props }) => (
  <span style={{
    color: error ? 'red' : busy ? 'gray' : !!reaction ? 'red' : 'black'
  }} {...props}> &hearts; {count} </span>)

<Reaction.component renderer={CustomComponent} id='test-1' />

Instance Methods

init()
If your redirect_uri isn't the URL you installed the button, you can call this method to redirect back to the URI and complete authorization process.
```
await reaction.init()
```
render(String/HTMLElement, config_to_override)
Render reaction component. Second arg override config values set on constructor.
```
applied_config = { ...config_set_on_constructor, ...config_to_override }
```
get component()
React component. Component's props will override the config you set on constructor.
```
<Reaction.component id='test-1' />
```