react-file-input

npm i --save @team-griffin/react-file-input

yarn add @team-griffin/react-file-input

This package allows you to design fancy file inputs, whilst not having an opinion on how you want to handle your forms or design.

Usage

import FileInput from '@team-griffin/react-file-input';

return (
  <FileInput
    id="a-unique-id-for-this-this-field"
    value={theListOfFilesNormallyStoredInReduxForm}
    button={(
      <button type="button">
        The button displayed
      </button>
    )}
    onChange={(e) => howToHandleTheChange}
  />
);

Note: It is recommended that in your application you wrap this component so that you are not having to constantly recode it. I would suggest also calling your component FileInput and then importing this component as ReactFileInput.

Customization

By default the file input will automatically render the text and layout for you. But you are welcome to configure this as much as you desire.

On the <FileInput/> component there are 2 props layout and text. You can use these to augment how this component renders.

const MyText = ({
  multiple,
  value,
}) => {
  return (
    <span>
      How ever you'd like to diplay your values.
    </span>
  );
};

const MyLayout = ({
  input,
  button,
  text,
  multiple,
  value,
}) => {
  return (
    <div>
      Your structure.
    </div>
  );
};

return (
  <FileInput
    button={<button>My Button</button>}
    layout={(<MyLayout/>)}
    text={(<MyText/>)}
  />
);

API

FileInput

All other props are passed through to the input.

Prop	Description	Type	Default
id*	Field Id	String
value	Array of values	Array
multiple	To support multiple values	Bool	false
button	The button to render	Element
text	The text to render	Element	Text
layout	The layout to render	Element	Layout
onChange	The callback for when the input changes	Func

Layout

The layout component is an internal component. But these are the props we pass to it or your custom one.

Prop	Description	Type	Default
value	Array of values	Array
multiple	To support multiple values	Bool
input	The input render	Element
button	The button to render	Element
text	The text to render	Element

Text

The text component is an internal component. But these are the props we pass to it or your custom one.

Prop	Description	Type	Default
value	Array of values	Array
multiple	To support multiple values	Bool