Have ideas to improve npm?Join in the discussion! »

@devloops/material-ui-dropzone
TypeScript icon, indicating that this package has built-in type declarations

0.1.9 • Public • Published

@devloops/material-ui-dropzone

NPM JavaScript Style Guide

Install

npm install --save @devloops/material-ui-dropzone
#or 
yarn add @devloops/material-ui-dropzone

DropzoneArea Usage

import React, { Component } from "react";
 
import { DropzoneArea } from "@devloops/material-ui-dropzone";
 
const DropzoneAreaExample = () => {
  return <DropzoneArea BannerComponent={DefaultBannerComponent /* or Default Comp*/} />;
};
 
const DefaultBannerComponent = ({ uploadIcon, bannerStyle, openFileDialog, bannerText }) => {
  const styles = makeStyles(DropzoneAreaStyle)();
  return (
    <div className={[styles.dropzone_banner, bannerStyle].join(" ")}>
      <Typography variant="h6">{bannerText}</Typography>
      <IconButton color="primary" className={styles.dropzone_iconBtn} onClick={openFileDialog}>
        <Icon className={styles.dropzone_icon}>{uploadIcon}</Icon>
      </IconButton>
    </div>
  );
};

Props

const defultProps = {
  BannerComponent: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
  PreviewComponent: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
  bannerStyle: PropTypes.string,
  bannerText: PropTypes.string,
  getProcessedData: PropTypes.func,
  inside: PropTypes.bool,
  limit: PropTypes.number,
  onChange: PropTypes.func,
  preview: PropTypes.bool,
  snackBarMessage: PropTypes.object,
  type: PropTypes.string,
  uploadIcon: PropTypes.string,
  wrapperProps: PropTypes.object,
  wrapperStyle: PropTypes.string
};



DropzoneArea Usage

import React, { Component } from "react";
 
import { DropzoneCard } from "@devloops/material-ui-dropzone";
 
const DropzoneCardExample = () => {
  return <DropzoneCard BannerComponent={DefaultBannerComponent /* or Default Comp*/} />;
};
 
const DefaultBannerComponent = ({ uploadIcon, bannerStyle, openFileDialog, bannerText }) => {
  const styles = makeStyles(DropzoneAreaStyle)();
  return (
    <div className={[styles.dropzone_banner, bannerStyle].join(" ")}>
      <Typography variant="h6">{bannerText}</Typography>
      <IconButton color="primary" className={styles.dropzone_iconBtn} onClick={openFileDialog}>
        <Icon className={styles.dropzone_icon}>{uploadIcon}</Icon>
      </IconButton>
    </div>
  );
};

Props

const defultProps = {
  BannerComponent: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
  bannerStyle: PropTypes.string,
  bannerText: PropTypes.string,
  getProcessedData: PropTypes.func,
  onChange: PropTypes.func,
  snackBarMessage: PropTypes.object,
  type: PropTypes.string,
  uploadIcon: PropTypes.string,
  wrapperProps: PropTypes.object,
  wrapperStyle: PropTypes.string
};



DropzoneArea Usage

import React, { Component } from "react";
 
import { FileButton } from "@devloops/material-ui-dropzone";
 
const FileButtonExample = () => {
  return <FileButton {...anyProps} />;
};

Props

const defultProps = {
  ButtonComponent: PropTypes.oneOfType([PropTypes.element, PropTypes.func, PropTypes.elementType]),
  fabIcon: PropTypes.string,
  fabProps: PropTypes.object,
  onChange: PropTypes.func,
  onError: PropTypes.func,
  fabText: PropTypes.string,
  inputProps: PropTypes.object
};

Todo List

  • Snackbar Support
  • Localize
  • More Examples

License

MIT © meftunca


This hook is created using create-react-hook.

Install

npm i @devloops/material-ui-dropzone

DownloadsWeekly Downloads

170

Version

0.1.9

License

MIT

Unpacked Size

145 kB

Total Files

31

Last publish

Collaborators

  • avatar