React component to display and verify a BlockCerts certificate.
Clone or download
Latest commit 0ced10b Nov 22, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
examples update Nov 17, 2018
src 0.5.4 Nov 22, 2018
.babelrc new webpack conf Jun 16, 2018
.gitignore Added .DS_Store to .gitignore Sep 19, 2018
.npmignore new webpack conf Jun 16, 2018
README.md doc Sep 20, 2018
package.json 0.5.4 Nov 22, 2018
webpack.config.js 0.5.4 Nov 22, 2018
yarn.lock auto tab, debug json, some cleanup Jul 18, 2018

README.md

react-blockcerts

Demo

https://guix77.github.io/react-blockcerts/

How to use

yarn add react-blockcerts

or

npm add react-blockcerts

Blockcerts component for signed certificates

import React, { Component } from 'react';
import { Blockcerts } from 'react-blockcerts';
export defaut MyComponent extends Component {
  render() {
    return(
      <Blockcerts
        url="https://raw.githubusercontent.com/blockchain-certificates/cert-verifier-js/master/tests/data/sample-cert-mainnet-valid-2.0.json"
      />
    );
  }
}

Props

Either an url, OR a json prop must be used.

  • url (string): url of the JSON of the signed certificate
  • json (object): the signed certificate as a JSON object
  • color (string): hex code for the header color text (facultative, fallbacks to white)
  • color_bg (string): hex code for the header background color (facultative, fallbacks to marine blue)
  • image (string): header image in base 64, like data:image/png;base64,... (facultative, fallbacks to BlockCerts logo)

BlockcertsPreview component for unsigned certificates

import React, { Component } from 'react';
import { BlockcertsPreview } from 'react-blockcerts';
export defaut MyComponent extends Component {
  render() {
    return(
      <BlockcertsPreview
        json={}
      />
    );
  }
}

Props

An url OR a json prop must be used.

  • json (object): the unsigned certificate as a JSON object
  • color_bg (string): hex code for the header background color (facultative, fallbacks to marine blue)
  • image (string): header image in base 64, like data:image/png;base64,... (facultative, fallbacks to BlockCerts logo)

Development

You do not need this if you are just using react-blockcerts.

Watch files and run a development server on http://localhost:3000/

yarn start

Publish NPM package:

npm publish

Publish demo:

yarn publish-demo