1.0.0 • Published 2 years ago

click-select-input v1.0.0

Weekly downloads
-
License
ISC
Repository
github
Last release
2 years ago

File select input on click

use this to create your own customize file input box.

Online Demo

npm install customize-file-input

Requirements

import React, {useState, useEffect} from 'react'
import FileInput from 'customize-file-input'

function App() {
  const [files, setfiles]= useState([])
  console.log(files)
  return (
    <div>
      <FileInput getFiles={setfiles}/>
    </div>
  );
}

export default App;

properties :-



nameisRequiredtypeexampleabout
getFilesrequiredfunction or setStateconst data, setData = useState('') const or data = (files)=>{console.log(files)}getFiles is a callBack function that returns files.
clickableViewnot requiredhtml_function()clickableView=()={return html}clickableView is a function in which html is sent, on which the file input of the clickable view is activated.
acceptnot required'string'accept = accept="image/*"Accept tells what type of file you want to select.
boxStylenot requiredstyle objectboxStyle = {{background:'red'}}The input file box will be styled with BoxStyle.
limitnot requirednumberlimit = {10}set max file select limit
viewUploadedFilesnot requiredboolviewUploadedFiles = {true}If you want to preview the uploaded file then it can be true viewUploadedFiles
loopnot requiredboolloop ={true}You can put a loop if you want to play the uploaded video or audio over and over again.
mediaBoxStylenot requiredstyle objectmediaBoxStyle = {{background:'red'}}view uploaded media box style
mediaStylenot requiredstyle objectmediaStyle = {{background:'red'}}uploaded media files style
videoAutoplaynot requiredboolvideoAutoplay = {true}autoPlay uploaded video files
audioAutoplaynot requiredboolaudioAutoplay = {true}atoplay uploaded Audio files
muteVideonot requiredboolmuteVideo = {true}mute autoPlay video file
muteAudionot requiredboolmuteAudio = {true}mute autoPlay audio file
boxClassnot requiredstringboxClass = 'className'uploaded files div class
multiplenot requiredboolmultiple = {true}select multiple files