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

@tri-bit/drizop

v1.1.0

Published

React file drop component, includes list and image gallery modes, file extension filtering and progress bar.

Downloads

7

Readme

Drizop

Easy to use file drop for React. Includes list and image gallery modes, file extension filtering and progress bar.

alt text

Images source: Pexels.com

Files can be removed by hovering, and then clicking the 'x' icon:

alt text

Usage

import  Drizop  from '@tri-bit/drizop';

//list mode example with filtered extensions
<Drizop onLoadCallback={handleFileDrop} allowedFileTypes="txt, doc, rtf"/>

//image gallery example with additional props
<Drizop
	mode="image"
	onLoadCallback={handleFileDrop}
	message="Drop your image(s) here"
	fileLimit={3}
	style={{border:"3px solid black"}}
/>

Props

| props | description | --- | --- | mode | "image" or "list" (Default value: "list") | onLoadCallback | Use this callback to send the dropped files to your application (for uploading, etc.) Every time a new file is dropped or a file removed this callback will send the updated file array. | allowedFileTypes | a comma seperated string of the allowed extensions (Example: "png, txt, jpg") | clearPreviousOnDrop | reset the file list on a new file drop (Default value: "false") | progress | You can display upload progress percentage (0-100) Setting above zero will lock file drops / removal. | message | Text in the center of component. (Default value: 'Drop File(s) Here') | button | Set to "true" to add a clickable button to the uploader - uses the browsers file open dialog (Default value: "false") | buttonMessage | Text inside the optional button (Default value: "Click Here To Upload") | fileLimit | Sets max number of files allowed (Default value: 8) | style | style object applied to Drizop component (Default value: {})

Notes

  • .dmg, .exe, .php extensions are automatically blocked (your backend should still do safety checks on uploaded files just to be safe.)
  • You can use the optional style prop to easily change Drizop's width or border style (and more.)