react-shine-api v1.3.4

react-shine-api

This is a react component that allows users to browse the SHINE API. It allows selection of files, and passes the selected files through to your app. View a demo here. This project was created using create-react-library

Installation

$ npm install --save react-shine-api

Usage

You will need to whitelist the IP address this app will be at with MPIWG before it will be allowed to connect to the SHINE API. To do this, please contact pbelouin@mpiwg-berlin.mpg.de

import React, { Component } from "react";
import ShineBrowser from "react-shine-api";

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      showShine: true
    };
  }

  close() {
    this.setState({ showShine: false });
  }

  handleFileUpload(files){
    console.log('Files: ', files);
  }

  render() {
    return (
      <div>
        <div style={{
            maxWidth: 1000,
            height: 700,
            margin: "auto",
            boxShadow: "0 .5rem 1rem rgba(0,0,0,.15)"
        }}>
          {this.state.showShine ? (
            <ShineBrowser
              styles={{
                primary: "#427af4"
              }}
              close={this.close.bind(this)}
              handleFileUpload={this.handleFileUpload.bind(this)}
            />
          ) : null}
        </div>
      </div>
    );
  }
}

Props for

File Array

An array of objects with the following structure

{
    id: "54d1dsf4-8bc9-4ee3-9abd-9256fe684cd",
    name: "孝義",
    parentUuid: "743711b7-c294-4619-90b3-963792248de4",
    uri: "https://urlname.com/4risesections/5379669",
    uuid: "54d174f4-8bc9-4ee3-9abd-924239e684cd",
    content: "all content comes through here as a string"
}

Styling

This component will take 100% height and width of its container. You can customize the styles by supplying the styles object detailed below to the component.

Development

Run the below command to start the server for the react-shine-api module

$ cd react-shine-api
$ npm link
$ npm start

Next, (in a seperate terminal) run the below commands to start the example project that wraps the component. When you make changes, you will see them updated in this project.

$ cd react-shine-api/example
$ npm link react-shine-api
$ npm start

Deployment

rollup will automatically bundle the module and publish it on the below command

$ npm publish

License

This project is licensed under the MIT License - see the LICENSE.txt file for details