在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
开源软件名称:yash-deore/react-ipfs-uploader开源软件地址:https://github.com/yash-deore/react-ipfs-uploader开源编程语言:JavaScript 95.4%开源软件介绍:react-ipfs-uploaderReact Components that enable you to upload a file(Images,PDFs,Text,etc.) , multiple files or a folder to IPFS .Installnpm :npm install react-ipfs-uploader yarn :yarn add react-ipfs-uploader Demohttps://yash-deore.github.io/react-ipfs-uploader/Demo Website :Demo VideoFeaturesSingle File Upload Components :1 . FileUpload : Uploads the selcted File and returns the URL after uploading the file . Multiple Files Upload Components :1 . MultipleFilesUpload : Uploads the selcted Files and returns the URL after uploading the files . Usage1 . Declare an
// FileUpload Component : Uploads the selcted File and returns the URL after uploading the file .
import React, { useState } from 'react'
import { FileUpload } from 'react-ipfs-uploader'
const YourComponent = () => {
const [fileUrl, setFileUrl] = useState('')
return (
<div>
<FileUpload setUrl={setFileUrl} />
FileUrl : <a
href={fileUrl}
target='_blank'
rel='noopener noreferrer'
>
{fileUrl}
</a>
</div>
)
}
export default YourComponent
// MultipleFilesUpload Component : Uploads Multiple files to IPFS and returns the URL
import React, { useState } from 'react'
import { MultipleFilesUpload } from 'react-ipfs-uploader'
const YourComponent = () => {
const [multipleFilesUrl, setMultipleFilesUrl] = useState('')
return (
<div>
<MultipleFilesUpload setUrl={setMultipleFilesUrl} />
MultipleFilesUrl : <a
href={multipleFilesUrl}
target='_blank'
rel='noopener noreferrer'
>
{multipleFilesUrl}
</a>
</div>
)
}
export default YourComponent
// FolderUpload Component : Uploads a Folder to IPFS and returns the URL
import React, { useState } from 'react'
import { FolderUpload } from 'react-ipfs-uploader'
const YourComponent = () => {
const [folderUrl, setFolderUrl] = useState('')
return (
<div>
<FolderUpload setUrl={setFolderUrl} />
FolderUrl : <a
href={folderUrl}
target='_blank'
rel='noopener noreferrer'
>
{folderUrl}
</a>
</div>
)
}
export default YourComponent
// ImageUpload : Shows the user a preview of the selected Image and returns the URL after uploading .
import React, { useState } from 'react'
import { ImageUpload } from 'react-ipfs-uploader'
const YourComponent = () => {
const [imageUrl, setImageUrl] = useState('')
return (
<div>
<ImageUpload setUrl={setImageUrl} />
ImageUrl : <a
href={imageUrl}
target='_blank'
rel='noopener noreferrer'
>
{imageUrl}
</a>
</div>
)
}
export default YourComponent
// PdfUpload : Shows the user a preview of the selected PDF and returns the URL after uploading .
import React, { useState } from 'react'
import { PdfUpload } from 'react-ipfs-uploader'
const YourComponent = () => {
const [pdfUrl, setPdfUrl] = useState('')
return (
<div>
<PdfUpload setUrl={setPdfUrl} />
Pdfurl : <a href={pdfUrl} target='_blank' rel='noopener noreferrer'>
{pdfUrl}
</a>
</div>
)
}
export default YourComponent
// TextUpload : Returns the URL of the Text after uploading
import React, { useState } from 'react'
import { Textupload } from 'react-ipfs-uploader'
const YourComponent = () => {
const [textUrl, setTextUrl] = useState('')
return (
<div>
<TextUpload setUrl={setTextUrl} />
TextUrl : <a
href={textUrl}
target='_blank'
rel='noopener noreferrer'
>
{textUrl}
</a>
</div>
)
}
export default YourComponent LinksDeveloper Chat : https://discord.gg/bgY4TZecVu LicenseMIT © yash-deore
|
2023-10-27
2022-08-15
2022-08-17
2022-09-23
2022-08-13
请发表评论