Simple React

There is a very simple react example below
React will support async, sync or client but this example is with sync
import React, { useState } from 'react'
import './App.css'
import Modfy from '@modfy/core'

const modfy = new Modfy({
  token: '',
  secretToken: ''
  // clientSide: true
})

function App() {
  const [file, setFile] = useState(null)

  const [ext, setExt] = useState('mp4')

  const [blobUrl, setBlobUrl] = useState(null)

  const handleClick = async () => {
    setExt(file.name.split('.').pop()) // Set file extention

    console.time('Processing')
    const processedFile = await modfy.compress({inputFiles:[file], compressValue: 20}, 'sync')
    const url = URL.createObjectURL(new Blob([processedFile]))
    setBlobUrl(url)
    console.timeEnd('Processing')
  }
  return (
    <div className="App">
      <header className="App-header">
        <p>This is an example application for the Modfy API</p>
        {!blobUrl ? (
          <>
            <input
              onChange={event => {
                setFile(event.target.files[0])
              }}
              type="file"
            />
            <button onClick={handleClick}> Compress </button>
          </>
        ) : (
          <div className="col">
            <video
              autoPlay
              muted
              controls
              src={blobUrl}
              alt="Processed video (only mp4,mov,webm supported)"></video>
            <a href={blobUrl} download={`test.${ext}`}>
              Download Video
            </a>
          </div>
        )}
      </header>
    </div>
  )
}

export default App