import React, { useState } from 'react';
import FileSignature from 'file-signature-in-react';

export const FileSignatureCryptoPro = () => {
  const [filesForSignature, setFilesForSignature] = useState(null);
  const [clear, setClear] = useState(false);

  const fileInputHandler = ({ target: { files = [] } }) => {
    setFilesForSignature(files);
  };

  const onChange = (e) => console.log(e);
  const callbackError = (e) => console.error(e);

  return (
    <div>
      <h2>Подписываем файл или файлы</h2>

      <input
        type="file"
        onChange={fileInputHandler}
        multiple // если хотим подписать много файлов скопом
      />

      <button onClick={() => setClear(true)}> Удалить подпись</button>

      <FileSignature
        {...{
          onChange, // функция вызовится когда файл подпишится
          files: filesForSignature, // самм файлы для подписи
          clear, // флаг очищения подписи
          callbackError, // функция вызовится когда будет ошибка
        }}
      />
    </div>
  );
};

import React, { useState } from 'react';
import FileSignature from 'file-signature-in-react';

import Select from '@material-ui/core/Select';
import Button from '@material-ui/core/Button';
import MenuItem from '@material-ui/core/MenuItem';

const MySelect = ({ options, onChange, ...props }) => {
  const handleChange = (event) => {
    onChange(event.target.value);
  };

  return (
    <Select {...props} fullWidth onChange={handleChange}>
      {options.map((item) => (
        <MenuItem key={item.value} value={item.value}>
          {item.label}
        </MenuItem>
      ))}
    </Select>
  );
};

const MyButton = (props) => (
  <Button {...props} variant={'contained'} color={'primary'}>
    sign my button
  </Button>
);

export const FileSignatureCryptoPro = () => {
  const [filesForSignature, setFilesForSignature] = useState(null);
  const [clear, setClear] = useState(false);

  const fileInputHandler = ({ target: { files = [] } }) => {
    setFilesForSignature(files);
  };

  const onChange = (e) => console.log(e);
  const callbackError = (e) => console.error(e);

  return (
    <div>
      <h2>Подписываем файл или файлы</h2>

      <input
        type="file"
        onChange={fileInputHandler}
        multiple // если хотим подписать много файлов скопом
      />

      <button onClick={() => setClear(true)}> Удалить подпись</button>

      <FileSignature
        {...{
          SelectComponent: MySelect,
          ButtonComponent: MyButton,
          onChange, // функция вызовится когда файл подпишится
          files: filesForSignature, // самм файлы для подписи
          clear, // флаг очищения подписи
          callbackError, // функция вызовится когда будет ошибка
        }}
      />
    </div>
  );
};