DocuBooth

A react package for documentation collection with webcam and drag and drop subcomponents.

Installation

You can install DocuBooth using this command:

npm install docu-booth-package

See package.json for peerDependencies. Warning: This package works with older versions of react and material-ui.

Usage

DocuBooth allows you to easily create fully customizable multi-step forms as composable react components.

Example:

import DocuBooth, { SayCheese, AttachDocs } from "docu-booth-package/dist";

function App() {
  const images = [
    {
      src: null,
      label: "Anvers",
    },
    {
      src: null,
      label: "Revers",
      optional: true,
    },
  ];

  const docs = [
    {
      src: null,
      label: "Factura",
    },
    {
      src: null,
      label: "Rebut",
    },
  ];

  const steps = [
    {
      label: "Step 1: VatID",
      Component: () => {
        return (
          <div>
            <h1>Title 1</h1>
            <SayCheese files={images} />
          </div>
        );
      },
    },
    {
      label: "Step 2: Invoice",
      Component: () => {
        return (
          <div>
            <h1>Title 2</h1>
            <AttachDocs files={docs} />;
          </div>
        );
      },
    },
  ];

  const onSubmit = (files) {
    // do something with collected files
  }

  return (
    <DocuBooth steps={steps} onSubmit={onSubmit} showSummary={false} />
  );
}

Components

1. DocuBooth

DocuBooth main component is a @material-ui/core Stepper component. This component builds a multi-step form with multi file collection for each step, validation and a summary confirmation step at the end. Each step needs to be provided with a react component as content with SayCheese or AttachDocs as file collection handler.

Props:

type StepConfig {
    label: String;
    Component: React.Component;
}

type DocuBoothProps {
    showSummary: Boolean;
    steps: StepConfig[];
    onSubmit: Function;
}

2. SayCheese

SayCheese is a webcam component for handling photo shoots with multi-file collection capabilities.

SayCheese can be used in conjunction with DocuBooth multi-step form or independently as a component.

Props

type FileConfig = {
  label: String;
  src?: String;
  type?: String;
  name?: String;
  optional?: Boolean;
};

type SayCheeseProps = {
  files: FileConfig[];
  setFiles: Function;
};

Example

function Profile() {
  const [files, setFiles] = useState([
    {
      label: "Portrait",
      src: null,
    },
    {
      label: "Selfie",
      src: null,
    },
  ]);

  useEffect(() => {
    console.log(files);
  }, [files]);

  return <SayCheese files={files} setFiles={setFiles} />;
}

3. AttachDocs

AttachDocs is a drag and drop component for handling file uploads with multi-file collection capabilities and mimetype validations.

AttachDocs can be used in conjunction with DocuBooth multi-step form or independently as a component.

Props

type FileConfig = {
  label: String;
  src?: String;
  type?: String;
  name?: String;
  optional?: Boolean;
};

type SayCheeseProps = {
  files: FileConfig[];
  setFiles: Function;
  accept: String[];
};

Example

function CV() {
  const acceptedFiles = [
    "application/pdf",
    "application/vnd.oasis.opendocument.text",
    "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
  ];

  const [files, setFiles] = useState([
    {
      label: "CV",
      src: null,
    },
    {
      label: "Motivation letter",
      src: null,
    },
  ]);

  useEffect(() => {
    console.log(files);
  }, [files]);

  return (
    <AttachDocs files={files} setFiles={setFiles} accept={acceptedFiles} />
  );
}