react-github-renderer

react-github-renderer

A react custom renderer for Github :octocat:

Table of contents

• Installation
• Motivation
• API
  • Renderer
    • ReactGithub.render(element)
  • Components
    • Gists
      • <Gist description isPublic children />
      • <File name children />
    • Releases
      • <Release tagName targetCommitish name draft prerelease children />
• Examples

Installation

$ npm install --save react-github-renderer

Alternatively, using yarn.

$ yarn add react-github-renderer

Motivation

Just for fun. I have wanted to look into react implementation (renderer, reconciler).

API

Renderer

• ReactGithub.render(element)

Components

• Gists

<Gist description isPublic>
  <File name children />
</Gist>

<Gist description isPublic children />

• description (String): a description of the gist (Default: '')
• isPublic (Boolean): indicates whether the gist is public. (Default: false)

<File name children />

• name (String, Required): name of file

• children (String, Required): contents of file

• Releases

<Release tagName targetCommitish name draft prerelease children />

• tagName (String, Required): the name of the tag
• targetCommitish (String): the commitish value that determines where the Git tag is created from (Default: master)
• name (String): the name of the release
• draft (Boolean): true to create a draft (unpublished) release, false to create a published one. (Default: false)
• prerelease (Boolean): true to identify the release as a prerelease. false to identify the release as a full release. (Default: false)
• children (String): text describing the contents of the tag

Examples

• Gists

import React from 'react';
import ReactGithub, { Gist, File } from 'react-github-renderer';
import GithubClient from './GithubClient';

const gist = ReactGithub.render(
  <Gist description="gist created by react-github-renderer" isPublic={false}>
    <File name="file.js">
      function fn() {}
    </File>
    <File name="file2.txt">
      contents of file2.txt
    </File>
  </Gist>
);

GithubClient.createGist(gist);

• Releases

import React from 'react';
import ReactGithub, { Release } from 'react-github-renderer';
import GithubClient from './GithubClient';

const release = ReactGithub.render(
  <Release
    tagName="v1.0.0"
    targetCommitish="master"
    name="v1.0.0"
    draft
    prerelease={false}
  >
    - Update dependencies version (#15)
  </Release>
);

GithubClient.createRelease(release);

Thanks

• @nitin42: for helpful tutorial
• @iamdustan: for tiny-react-renderer with a brief implementation
• @CentaurWarchief: for inspiration from react-slack-renderer

License

MIT © Taehwan, No (taehwanno)