@devloops/material-ui-dropzone

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

• [x] Snackbar Support
• [x] Localize
• [ ] More Examples

License

MIT © meftunca

---

This hook is created using create-react-hook.