@adeelasif/awesome-editor/src/App.js

A full fledge web based photo editor

import React from "react";
import logo from "./logo.svg";
import "./App.css";
import Editor from "./components/Editor/Editor.jsx";

function App() {
  const [modalIsOpen, setIsOpen] = React.useState(false);
  const [file, setFile] = React.useState(null);
  function openModal() {
    setIsOpen(true);
  }
  function closeModal() {
    setIsOpen(false);
  }
  function afterOpenModal() {
    // references are now sync'd and can be accessed.
    // subtitle.style.color = '#f00';
  }

  const handleChange = (event) => {
    // setFile(URL.createObjectURL(event.target.files[0]));
    setFile(event.target.files[0]);
    openModal();
  };

  React.useEffect(() => {
    const script = document.createElement("script");

    script.src =
      "https://cdnjs.cloudflare.com/ajax/libs/camanjs/4.0.0/caman.full.min.js";
    script.async = true;

    document.body.appendChild(script);

    return () => {
      document.body.removeChild(script);
    };
  }, []);

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <button onClick={openModal}>Open Modal</button>

        <Editor
          isOpen={modalIsOpen}
          onClose={closeModal}
          afterOpenModal={afterOpenModal}
          image={file}
        />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>

        <div>
          <input type="file" onChange={handleChange} />
          {/* <img src={file}/> */}
        </div>
      </header>
    </div>
  );
}

export default App;