dstor-react-sdk

Dstor SDK that allows you to work with a global storage dStor

Installation

Using npm:

$ npm install dstor-react-sdk

Once the package is installed, you can import the library using import approach.

Import:

import { DstorProvider, DstorContext } from 'dstor-react-sdk';

Getting Started

First you need to specify Environment in the DstorProvider:

DstorProvider

environment: "maindish" || "staging" || "production"

import { DstorProvider } from 'dstor-react-sdk';

<DstorProvider config={
    { environment: "xxx" } // "maindish" || "staging" || "production"
  } 
/>

dstorAuthentication({ email: string, password: string } || { apiKey: string });

import Recat, { useContext } from "react";
import { DstorProvider, DstorContext } from 'dstor-react-sdk';

const credits = {
  email: '[e-mail]',
  password: 'xxxxxxx'
}

const SignIn = () => {
  const { dstorAuthentication } = useContext(DstorContext);

  const dstorAuthenticationWithEmailPassword = async () => {
    return await dstorAuthentication(credits); // return: "Authentication successful!"
  }

  return (
    <button onClick={dstorAuthenticationWithEmailPassword}>Sign In</button>
  )
}


const App = () => {
  return (
    <DstorProvider config={{ environment: "xxx" }}> // "maindish" || "staging" || "production"
      <SignIn />
    </DstorProvider>
  )
}

React.DOM.render(<App />, document.getElementById("root"));

import Recat, { useContext } from "react";
import { DstorProvider, DstorContext } from 'dstor-react-sdk';

const credits = {
  apiKey: 'xxxxxxxxxxxxxxxx'
}

const SignIn = () => {
  const { dstorAuthentication } = useContext(DstorContext);

  const dstorAuthenticationWithApiKey = async () => {
    return await dstorAuthentication(credits); // return: "Authentication successful!"
  }

  return (
    <button onClick={dstorAuthenticationWithApiKey}>Sign In</button>
  )
}


const App = () => {
  return (
    <DstorProvider config={{ environment: "xxx" }}> // "maindish" || "staging" || "production"
      <SignIn />
    </DstorProvider>
  )
}

React.DOM.render(<App />, document.getElementById("root"));

dstorApiBase

import Recat, { useContext, useState, useEffect } from "react";
import { DstorProvider, DstorContext } from 'dstor-react-sdk';

const GetApiBase = () => {
  const { dstorApiBase } = useContext(DstorContext);
  const [ apiBase, setApiBase ] = useState();
  
  useEffect(() => {
    setApiBase(dstorApiBase); // api.xxx.Dstor.cloud
  }, [])

  return (
    <div>{ apiBase }</div>
  )
}


const App = () => {
  return (
    <DstorProvider config={{ environment: "xxx" }}> // "maindish" || "staging" || "production"
      <GetApiBase />
    </DstorProvider>
  )
}

React.DOM.render(<App />, document.getElementById("root"));

dstorGetFileInfo(hash: string)

hash: hash that belongs to the file on dStor

import Recat, { useContext, useState, useEffect } from "react";
import { DstorProvider, DstorContext } from 'dstor-react-sdk';

const hash = 'xxxxxxxxxxx'

const GetFileInfo = () => {
  const { dstorGetFileInfo } = useContext(DstorContext);
  const [ fileInfo, setFileInfo ] = useState();

  const getFileInfo = async () => {
    return await dstorGetFileInfo(hash);
  }

  useEffect(() => {
    setFileInfo(getFileInfo); // [{file_name: ... , file_hash: ... , file_size: ... , ......}]
  }, [])

  return (
    <div>{ fileInfo }</div>
  )
}


const App = () => {
  return (
    <DstorProvider config={{ environment: "xxx" }}> // "maindish" || "staging" || "production"
      <GetFileInfo />
    </DstorProvider>
  )
}

React.DOM.render(<App />, document.getElementById("root"));

dstorUploadFile(data: File[])

data: e.target.files (or array of files)

import Recat, { useContext, useState, useEffect } from "react";
import { DstorProvider, DstorContext } from 'dstor-react-sdk';


const UploadFile = () => {
  const { dstorUploadFile } = useContext(DstorContext);

  const uploadFile = async (e) => {
    return await dstorUploadFile(e.target.files); // return: Upload successfully!
  }

  return (
    <input type="file" onChange={uploadFile} multiple />
  )
}


const App = () => {
  return (
    <DstorProvider config={{ environment: "xxx" }}> // "maindish" || "staging" || "production"
      <UploadFile />
    </DstorProvider>
  )
}

React.DOM.render(<App />, document.getElementById("root"));