Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/inovando/react-components
:atom: Very opinionated reusable components (some binded to final-form exclusively) https://www.npmjs.com/package/@inovando/react-components
https://github.com/inovando/react-components
components final-form reactjs
Last synced: 4 days ago
JSON representation
:atom: Very opinionated reusable components (some binded to final-form exclusively) https://www.npmjs.com/package/@inovando/react-components
- Host: GitHub
- URL: https://github.com/inovando/react-components
- Owner: inovando
- Created: 2020-07-15T19:05:02.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2021-01-15T19:41:43.000Z (almost 4 years ago)
- Last Synced: 2024-10-07T05:44:08.347Z (about 1 month ago)
- Topics: components, final-form, reactjs
- Language: JavaScript
- Homepage: https://inovando.github.io/react-components/
- Size: 4.05 MB
- Stars: 4
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# @inovando/react-components
> :atom: Very opinionated reusable components (some binded to final-form exclusively)
[](https://www.npmjs.com/package/@inovando/react-components) [](https://github.com/prettier/prettier)
[Demo](https://inovando.github.io/react-components)
## Install
```bash
npm install --save @inovando/react-components
# or
yarn add @inovando/react-components
```
## Usage
### ``
```jsx
import React, { Component } from "react";
import { Upload } from "@inovando/react-components";
import "@inovando/react-components/dist/index.css";
const App = () => {
const [files, setFiles] = useState([]);
return (
{
setFiles(files);
}}
value={files}
// This overrides "locale" prop
label="Arraste arquivos ou clique aqui para fazer upload"
// Only "pt" or "en" yet, defaults to "pt"
locale="pt"
// Accept file type range (Optional)
// https://react-dropzone.js.org/#section-accepting-specific-file-types
accept="image/*"
// in mb (Optional)
maxSize={3}
// custom style for container
style={{ margin: '0 auto', maxWidth: 400 }}
/>
);
};
```
## [Final-Form](https://final-form.org/react/) Adapters
### Install final-form
```bash
npm install --save final-form react-final-form
# or
yarn add final-form react-final-form
```
### `` (based on [React Dropzone](https://react-dropzone.js.org/))
> [Check out "initialValues" example](https://inovando.github.io/react-components/)
```jsx
import React from 'react';
import { Form, Field } from 'react-final-form';
import { UploadField } from '@inovando/react-components';
import '@inovando/react-components/dist/index.css';
function ExampleForm() {
const onSubmit = values => {
console.log('values:', values)
}
return (
(
value.length ? undefined : 'Campo obrigatório'
}
/>
submit
)}
/>
);
}
```
### `` (based on [React Number Format](https://github.com/s-yadav/react-number-format))
> [Check out "initialValues" example](https://inovando.github.io/react-components/)
```jsx
import React from 'react';
import { Form, Field } from 'react-final-form';
import { MoneyField } from '@inovando/react-components';
import '@inovando/react-components/dist/index.css';
function ExampleForm() {
const onSubmit = values => {
console.log('values:', values)
}
return (
(
(value ? undefined : 'Campo obrigatório')}
/>
submit
)}
/>
);
}
```
### `` (based on [Material-UI Autocomplete](https://material-ui.com/api/autocomplete/))
> [Check out "initialValues" example](https://inovando.github.io/react-components/)
```jsx
import React from 'react';
import { Form, Field } from 'react-final-form';
import { AutocompleteField } from '@inovando/react-components';
import '@inovando/react-components/dist/index.css';
const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));
function ExampleForm() {
const [loading, setLoading] = useState(false);
const onSubmit = values => {
console.log('values:', values)
}
return (
(
{
console.log('value:', value);
}}
onSearch={async (text) => {
setLoading(true);
await sleep(1000);
setLoading(false);
}}
kind="value" // expects "initialValue" as anything but an object, defaults to "object"
delay={500} // "onSearch" debounce delay in ms, defaults to 250
loading={loading}
validate={(value) => (value ? undefined : 'Campo obrigatório')}
/>
submit
)}
/>
);
}
```
### `` (based on [Material-UI Pickers](https://material-ui-pickers.dev/))
> [Check out "initialValues" example](https://inovando.github.io/react-components/)
```jsx
import React from 'react';
import { Form, Field } from 'react-final-form';
import { DateField } from '@inovando/react-components';
import '@inovando/react-components/dist/index.css';
// Material-UI Pickers Dependencies
import { MuiPickersUtilsProvider } from '@material-ui/pickers';
import DateFnsUtils from '@date-io/date-fns';
import ptLocale from 'date-fns/locale/pt';
const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));
function ExampleForm() {
const [loading, setLoading] = useState(false);
const onSubmit = values => {
console.log('values:', values)
}
return (
// this tag can be at your global scope, such as "App.js"
(
value && isBefore(subDays(new Date(), 1), parseISO(value))
? undefined
: 'Campo inválido'
}
/>
submit
)}
/>
);
}
```
## License
MIT © [inovando](https://github.com/inovando)