react-quix-loader

React QuiX Loader

Reduce the load of a website. If a media is already downloaded by another user, it will be downloader with webtorrent tech, so no load or GB consumed on the server machine. This will grant to the host that the website can be used by infinite people without bandwidth problem.

There is another way to improve this system (A wiki with all detail can be requested in the issue)

Prop Types

Props to pass to the UI component

Property	Type	Required?	Description
src	String	true	Like in an image component, the source of the file
infoHash	String	true	An id to generate from https://instant.io
loadingComponent	Component	false	A component waiting to find the torrent on p2p network
maxTimeout	Number	false	Default 15000, it's the time that wait before load the content from the server instead of torrent network

Examples

Here is an example of the use of the component with the UI

import {QuiXImg, QuiXVideo} from 'react-quix-loader';
import img1 from './asset/img1.jpg'
import videoSmall from './asset/video_small.mp4'

import img2 from './asset/img2.jpg'
import videoBig from './asset/video_big.mp4'

function App() {

    return (
        <div style={{display:"flex", flexDirection:"column"}}>
            Small image:
            <QuiXImg style={{height: "200px", objectFit:"contain"}} src={img1} infoHash={"befa0472c1d9fc266f0448f7b35076b4b29835c7"}/>
            Big image:
            <QuiXImg style={{height: "200px", objectFit:"contain"}} src={img2} infoHash={"b34630aa434af7a664d3a186b8fca7ce31734f09"}/>
            Small video:
            <QuiXVideo style={{height: "400px"}} src={videoSmall}
                       infoHash={"a8e5c780be600d02bac85a551bc8ed6626334dbf"}/>
            Big video:
            <QuiXVideo style={{height: "400px"}} src={videoBig}
                       infoHash={"cb9405f084dd224919f1399a425315c7a63211b9"}/>
        </div>
    );
}

export default App;