npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@sekmet/react-ipfs-uploader

v1.3.32

Published

React Components that enable you to upload file(Images,PDFs,Text,etc.) , multiple files or a folder to IPFS .

Downloads

67

Readme

React IPFS Uploader

React Components that enable you to upload a file(Images,PDFs,Text,etc.) , multiple files or a folder to IPFS .

NPM downloads JavaScript Style Guide

Install

npm :

npm install @sekmet/react-ipfs-uploader

yarn :

yarn add @sekmet/react-ipfs-uploader

Demo

Demo Website : https://yash-deore.github.io/react-ipfs-uploader/

Demo Video

Demo Video

Features

Single File Upload Components :

1 . FileUpload : Uploads the selcted File and returns the URL after uploading the file . 2 . ImageUpload : Shows the user a preview of the selected Image and returns the URL after uploading . 3 . PdfUpload : Shows the user a preview of the selected PDF and returns the URL after uploading . 4 . TextUpload : Returns the URL of the Text after uploading .

Multiple Files Upload Components :

1 . MultipleFilesUpload : Uploads the selcted Files and returns the URL after uploading the files . 2 . FolderUpload : Uploads the selected Folder and returns the URL after uploading the folder .

Usage

1 . Declare an useState hook that can hold a string as its current state . 2 . Pass the setFunction to the component you are using ie. setUrl={setFunction} 3 . As you upload the file , files or folder the url will be returned .

FileUpload : Uploads the selcted File and returns the URL after uploading the file .

Example : https://codesandbox.io/s/fileupload-81g84

// FileUpload Component : Uploads the selcted File and returns the URL after uploading the file .
import React, { useState } from 'react'
import { FileUpload } from '@sekmet/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 : Uploads Multiple Files and returns the URL after uploading the files .

Example : https://codesandbox.io/s/multiplefilesupload-uf6yw

// MultipleFilesUpload Component : Uploads Multiple files to IPFS and returns the URL
import React, { useState } from 'react'
import { MultipleFilesUpload } from '@sekmet/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 : Uploads Folder and returns the URL after uploading the folder .

Example : https://codesandbox.io/s/folderupload-y6j2b

// FolderUpload Component : Uploads a Folder to IPFS and returns the URL
import React, { useState } from 'react'
import { FolderUpload } from '@sekmet/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 .

Example : https://codesandbox.io/s/imageupload-65kpl

// ImageUpload : Shows the user a preview of the selected Image and returns the URL after uploading .
import React, { useState } from 'react'
import { ImageUpload } from '@sekmet/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 .

Example : https://codesandbox.io/s/pdfupload-ce4ch

// PdfUpload : Shows the user a preview of the selected PDF and returns the URL after uploading .
import React, { useState } from 'react'
import { PdfUpload } from '@sekmet/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

Example : https://codesandbox.io/s/textupload-vpcst

// TextUpload : Returns the URL of the Text after uploading
import React, { useState } from 'react'
import { Textupload } from '@sekmet/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

Links

Developer Chat : https://discord.gg/bgY4TZecVu Demo Website : https://yash-deore.github.io/react-ipfs-uploader/ CodeSandBox : https://codesandbox.io/u/yash-deore NPM Package : https://www.npmjs.com/package/react-ipfs-uploader GitHub Repository : https://github.com/yash-deore/react-ipfs-uploader

License

MIT © yash-deore

Made with react , create-react-library , ipfs-http-client , it-all