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