github-reaction-button

Reaction button that stores reaction data in github issues.

TODO

• [x] Custom renderer
• [ ] Test code
• [ ] Function to add comment text by user
• [ ] Embed url in comment

Demo

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

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' />

LICENSE

MIT