Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/team-griffin/react-file-input
Unopinionated custom file input
https://github.com/team-griffin/react-file-input
files forms react
Last synced: about 1 month ago
JSON representation
Unopinionated custom file input
- Host: GitHub
- URL: https://github.com/team-griffin/react-file-input
- Owner: team-griffin
- License: mit
- Created: 2017-03-28T13:57:25.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2017-04-14T18:14:42.000Z (over 7 years ago)
- Last Synced: 2024-04-27T05:42:01.939Z (8 months ago)
- Topics: files, forms, react
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/@team-griffin/react-file-input
- Size: 71.3 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-file-input
```sh
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
```jsx
import FileInput from '@team-griffin/react-file-input';
return (
The button displayed
)}
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 `` component there are 2 props `layout` and `text`. You can use these to augment how this component renders.
```jsx
const MyText = ({
multiple,
value,
}) => {
return (
How ever you'd like to diplay your values.
);
};
const MyLayout = ({
input,
button,
text,
multiple,
value,
}) => {
return (
Your structure.
);
};
return (
My Button}
layout={()}
text={()}
/>
);
```
## 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 | |