React-augusta-events NPM

React Augusta Events

One of the simplest forms of encryption

Install

$ npm install --save react-augusta-events

or

$ npm i -S react-augusta-events

Hooks

1. useDragDrop

2. useClipboard

Usage

1. useDragDrop

Demo 1

import { useDragDrop } from 'react-augusta-events/lib';


...
function App() {
  const { elRef, listening, isDropZone, isUpload } = useDragDrop({
    onUploadFile: (data) => {
      console.log(data);
    },
  });

  return (
    <div className="App">
      <header className="App-header">
        <div
          ref={elRef}
          className={isDropZone ? "in-drop" : "drop-zone"}
          {...listening}
        >
          {isUpload ? "Successufly upload!" : ( isDropZone ? "Now Drop you File" : "Upload you file" )}
        </div>
      </header>
    </div>
  );
}

API ( useDragDrop )

Field: isDropZone : boolean - for item behaviour, Field: isUpload : boolean - for upload behaviour,

2. useClipboard

Demo 2

import { useClipboard } from "react-augusta-events/lib";
import { useState } from "react";

export default function App() {
  let [value, setValue] = useState("");
  let { elRef, boards, isCopy, isPaste, isCut } = useClipboard({
    copyValue: (data) => {
      console.log("copy", data);
    },
    cutValue: (data) => {
      console.log("cut", data);
    },
    pasteValue: (data) => {
      console.log("paste", data);
      setValue(data.pasteText);
    }
  });

  return (
    <div className="App">
      <header className="App-header">
        <h1>{value}</h1>
        {isCopy && <p>"Copy code!"</p>}
        {isCut && <p>"Cut code!"</p>}
        {isPaste && <p>"Paste code!"</p>}
        <input
          ref={elRef}
          value={value}
          onChange={({ target }) => setValue(target.value)}
          className="copyCard"
          {...boards}
        />
      </header>
    </div>
  );
}

Demo 3

import { useClipboard } from 'react-augusta-events/lib';


...
  let { elRef, boards, isCopy } = useClipboard({
    copyValue: (data) => {
      console.log("copy",data);
    },
  })

  return (
    <div className="App">
    <header className="App-header">
      {isCopy && <h2>"Copy code!"</h2>}
      <div ref={elRef} className="copyCard" {...boards}>
        #f4bf4a 
      </div>
    
    </header>
  </div>
  );