Giter Site home page Giter Site logo

kaihotz / react-formik-ui Goto Github PK

View Code? Open in Web Editor NEW
164.0 7.0 15.0 46.2 MB

A simple component library, composed out of pure HTML form elements to make your live easier composing forms with Formik and React

Home Page: https://kaihotz.github.io/react-formik-ui/

License: MIT License

JavaScript 5.99% SCSS 15.22% TypeScript 78.79%
react react-components formik javascript javascript-library typescript

react-formik-ui's Introduction

React-Formik-UI

NPM npm bundle size license npm

Overview

React-Formik-UI is a simple component library, composed out of pure HTML form elements like: form, input, select, checkbox, radio and textarea.

The Idea behind React-Formik-UI is to make the composition of forms with React and Formik even easier, so you don't have to write any HTML markup or extra components for your forms.

Each component makes use of Formiks context, there for you need to have Formik installed in your project.

NEW in v5:

Typescript: React-Formik-UI is now written in Typescript

There where several breaking changes, if you come from version 4 please refer to Migrating from v4 to v5 section in this document for all the changes

Markup, Styling and ClassNames

The markup for the components Input, PhoneInput, Select, Checkbox, Radio, Textarea, Datepicker and DropZone consists of a wrapper div, label, the main component, hint, and error message.

By default all component have NO styling applied at all.
This is intentionally, so you have the possibility to apply your own styling through css or scss by passing a custom className.
All the components used in the Form are scoped by the default classes, situated on the Form component, react-formik-ui form-wrapper

Each component has its corresponding component class (eg: PhoneInput component phoneInput ) followed a level deeper by its wrapper class (eg: phoneInput component phoneInput-wrapper ), as well as the class form-element.

You can pass the style prop on each component, to add custom inline styles to the component main element. Lets say you ad a style object through the style prop on the Select component, the inline styles will be applied to the select element of the Select component.

The className Prop can be passed on each component to add a css class directly to the component instead of the wrapper div, so libraries like Bootstrap can be used to style the form component.

The Styling prop: If you pass the styling prop to the Form component with structure as value, a minimal styling will be applied to add some structure to each form-element.

In case you pass the value theme through the styling prop on the Form component, the React-Formik-Ui Theme will be applied

Migrating from v4 to v5:

  • Button component has been removed, therfore you should use your own.
  • SubmitBtn component now also recieves a text prop for rnedering the text of the button
  • mode prop has been renamed to styling, the values structured and themed for the it also have been renamed to structure and theme.
  • Datepicker component has been renamed to `DatePicker``
  • The style prop has been removed form the DatePicker and PhoneInputcomponent

Installation

Note: React Formik UI makes use of the recently released react Hooks API, therefore make sure that your project uses at least React version 16.13.1

yarn add react-formik-ui

or

npm i -S react-formik-ui

Usage

Peer Dependency

React-Formik-UI has Formik, React and react-dom as Peer dependencies.
So make shure to have those packages installed to your project to make use of React-Formik-UI.

yarn add formik

or

npm i -S formik

Form validations

To validate the form fields, the use of Yup is recommended.

yarn add yup

or

npm i -S yup

See the Styleguide with Demo and Examples here

Components Documentation and Examples

License

MIT © KaiHotz

Support

If you like the project and want to support my work, you can buy me a coffee :)

paypal

react-formik-ui's People

Contributors

dependabot[bot] avatar elstob avatar glcheetham avatar jefhar avatar kaihotz avatar staff0rd avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar

react-formik-ui's Issues

DatePicker: Error Maximum update depth exceeded

Version
react-formik-ui: 2.2.0
react: 16.8.1
Mode Default

Describe the bug
On Firefox, selecting a date in the DatePicker crashes the whole app.
On Midori browser (Webkit based) it is even worse. It crashes when we clic on the input.
Apparently it is a known issue in react-datepicker
Hacker0x01/react-datepicker#1565

To Reproduce

  1. Create a component
import React from 'react'
import { Formik } from 'formik'
import { Form, Datepicker } from 'react-formik-ui'

export default () => {
  return (
    <Formik initialValues={{ date: null }} onSubmit={data => {}}>
      {() => (
        <Form>
          <Datepicker name="date" />
        </Form>
      )}
    </Formik>
  )
}
  1. Select a date if it does not crash right away

Desktop and Mobile (please complete the following information):

  • OS: Linux but happens on deployed site
  • Browser: Firefox and Webkit based
  • Version: Firefox 65 for example

TestSuites Fail with syntax Error

Version
The version of React-Formik-UI that you are using : "react-formik-ui": "^2.3.17"

Mode
The mode you are using React-Formik-UI in,
[Default]

Describe the bug
It is working in Browser, but gives syntax error in TestCases:
app/systems/components/react/SystemStartMonitoring.jest.jsx
● Test suite failed to run

/data/frontend/node_modules/react-formik-ui/dist/index.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import React__default, { useState, Fragment, createElement, Component, forwardRef, useEffect, useRef, useReducer, useCallback, useMemo, createRef } from 'react';
                                                                                                ^^^^^^^^^^^^^^

SyntaxError: Unexpected identifier

  3 | import { connect } from 'react-redux'
  4 | import { Form, Datepicker } from 'react-formik-ui'
> 5 | import { pick, isEmpty } from 'lodash'
    |                                                                     ^
  6 | import { t } from 'ttag'
  7 | import { nl } from 'date-fns/locale'
  8 | import { Formik } from 'formik'

  at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:451:17)
  at ScriptTransformer.transform (node_modules/@jest/transform/build/ScriptTransformer.js:493:19)
  at app/systems/components/react/SystemStartMonitoring.jsx:5:87
  at Object.<anonymous> (app/systems/components/react/SystemStartMonitoring.jsx:13:3)

Implement a robust number field

Is your feature request related to a problem? Please describe.
It is difficult to customize the existing implementation of a number field (which is using Input with type number).

Describe the solution you'd like
Implement a standalone number field, perhaps using react-number-format

Describe alternatives you've considered
I began this request as a currency field but I feel like a more flexible number field would be more widely beneficial

WebpackError: ReferenceError: document is not defined

Version
React-Formik-UI @ 2.3.3 (same problem with any 2.3 patch)

Mode
The mode you are using React-Formik-UI in,
[Default]

Describe the bug
Didn't change anything and seeing this error

  16309 | var accepts = unwrapExports(dist);
  16310 | 
> 16311 | var supportMultiple = 'multiple' in document.createElement('input'); // Firefox versions prior to 53 return a bogus MIME type for every file drag, so dragovers with
        | ^
  16312 | // that MIME type will always be accepted
  16313 | 
  16314 | function fileAccepted(file, accept) {


  WebpackError: ReferenceError: document is not defined
  
  - index.js:16311 Module../node_modules/react-formik-ui/dist/index.js
    [lib]/[react-formik-ui]/dist/index.js:16311:1
  
  - bootstrap:19 __webpack_require__
    lib/webpack/bootstrap:19:1
  
  
  - bootstrap:19 __webpack_require__
    lib/webpack/bootstrap:19:1
  
  
  - bootstrap:19 __webpack_require__
    lib/webpack/bootstrap:19:1
  
  - sync-requires.js:9 Object../.cache/sync-requires.js
    lib/.cache/sync-requires.js:9:55
  
  - bootstrap:19 __webpack_require__
    lib/webpack/bootstrap:19:1
  
  - static-entry.js:9 Module../.cache/static-entry.js
    lib/.cache/static-entry.js:9:22
  
  - bootstrap:19 __webpack_require__
    lib/webpack/bootstrap:19:1
  
  - bootstrap:83 
    lib/webpack/bootstrap:83:1
  
  
  - universalModuleDefinition:3 webpackUniversalModuleDefinition
    lib/webpack/universalModuleDefinition:3:1
  
  - universalModuleDefinition:10 Object.<anonymous>
    lib/webpack/universalModuleDefinition:10:2
  
  - static-entry.js:103 Module._compile
    lib/.cache/static-entry.js:103:3
  
  - static-entry.js:115 Object.Module._extensions..js
    lib/.cache/static-entry.js:115:7

... Sorry I am going to be lazy on the description since I guess the error will be obvious for you to find. If it is not, tell me what to try or what to tell you @KaiHotz.

Additional context
This happens when building the website with GatsbyJS
Version 2.2.5 is going fine so I rolled back

Select with integer value is converted to string during form submit

Version
4.0.5

Mode
The mode you are using React-Formik-UI in,
[Structured]

Describe the bug

A formik with initial values like this:

<Formik
            initialValues={{ name: '', dueDate:'', priority: 0}}

A select like this:

<Select
                    name='priority'
                    label='Priority'
                    placeholder='Select a priority'
                    options={[
                        { value: 0, label: 'Low' },
                        { value: 1, label: 'Normal' },
                        { value: 2, label: 'High' }
                    ]}
                />

... integer values are being converted to string during form submit.

onSubmit={(values, { setSubmitting }) =>
            {
                // here values.priority is a string like "0" and this is breaking the POST operation because my backend is expecting an int when doing `JSON.stringify(values)`.
}

A workaround I used just before doing JSON.stringigy(values) was this:

values.priority = parseInt(values.priority)

Expected behavior
As values are integer when defining the Select element it should assign int values during form submit as I understand it. Maybe I'm wrong...

Desktop (please complete the following information):

  • OS: [Mac OS]
  • Browser [chrome]
  • Version [79.0.3945.130]

Multiple Select

The possibility of the on next version have a component multiple select

Dropzone styling

is there a way to change the background color of the dropzone component?

Custom Label Component

Hi @KaiHotz,

I'm considering using react-formik-ui for a project, so first, thanks for putting this together, it looks really handy.
A concern of mine though, is that, down the line, I'd like to be able to provide custom styling/components to every pieces of UI, including label & hint or error messages which currently aren't easily styled when one's using CSS-in-Js setup.

I'm thinking of something as simple as

 <Input
  name='nameExample'
  label={<Label>Name</Label>}
  required
/>

The withLabel HoC could handle both being given a component or a string and act accordingly.

Would you consider a PR that would add such possibilities?
If so I could allocate some time to work on that in the future.
Thanks

FIELDSET - INPUT SIDE BY SIDE

I want to put 2 INPUT site by side and below then other 2 within the FIELDSET.

Like:

NAME: XXXX LASTNAME: XXXX
AGE: XXXX GENDER: XXXX

Is it possible to do?

Could not load source file "src/lib/components/PhoneInput/styles.scss"

Version
"react-formik-ui": "^3.0.12",

Mode
[Default]

Describe the bug
Can't load the PhoneInput

⚠️  Could not load source file "src/lib/components/PhoneInput/styles.scss" in source map of "node_modules/@cm-pdsa/styleguide/dist/index.js".
⚠️  Could not load source file "src/lib/components/PhoneInput/styles.scss" in source map of "node_modules/react-formik-ui/dist/index.js".

Desktop (please complete the following information):

  • Browser [Chrome]

Dropzone className doesnt work

The className Props for Dropzone doesn't work. the div always comes with 'dropzone' class and I can`t change the style.
I want to change box of the dropzone but it is fixed by this dropzone class

<div tabindex="0" class="dropzone">

Is there a way to provide custom name to the submit button ?

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

PhoneInput clears when I press backspace

Version
The version of React-Formik-UI that you are using

Mode
The mode you are using React-Formik-UI in,
[Default]

Describe the bug
when I press backspace or left arrow, the whole input is cleared

To Reproduce
Steps to reproduce the behavior:

  1. Go to '#'
  2. Click on 'Phone number'
  3. Scroll down to 'Phone number'
  4. See error

Expected behavior
Type in a number then try to correct it, you will notice that it clears the entire input

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

  • OS: [e.g. iOS]
  • Browser [e.g. chrome, safari]
  • Version [e.g. 22]

Smartphone (please complete the following information):

  • Device: [e.g. iPhone6]
  • OS: [e.g. iOS8.1]
  • Browser [e.g. stock browser, safari]
  • Version [e.g. 22]

Additional context
Add any other context about the problem here.

Complete example not working for me

I'm new to Formik and interested in react-formik-ui as it looks super helpful, but the example isn't working for me either in my own app, or when I set it up by itself in Sandbox Editor. Please see:

https://codesandbox.io/s/045v1vxpvl

Each field is throwing an error TypeError Cannot read property 'fieldname' of undefined

Add FieldArray to examples

Documentation can be improved with an example on how to implement FieldArray with formik-ui.
Could be a huge time saver for some developers

DatePicker required error message doesn't go away when a date is selected

Version
4.0.5

Mode
The mode you are using React-Formik-UI in,
[Structured]

Describe the bug
The title says it all.

To Reproduce
Steps to reproduce the behavior:

  1. Go to https://kaihotz.github.io/react-formik-ui/#datepicker and pick Structured Required
  2. Click the Submit button
  3. Is Required is shown
  4. Pick a date in the datepicker
  5. Is Required is still visible

Expected behavior
Is Required message should go away right after a date is picked

Desktop (please complete the following information):

  • OS: [Mac OS]
  • Browser [chrome]
  • Version [79.0.3945.130]

Enhancements to Dropzone

Is your feature request related to a problem? Please describe.
Slightly related to an issue where it would be ideal for the file info message (e.g. X files acepted, Y files rejected) to reset to 0 when you press the Clear Files button.
image

Describe the solution you'd like
Also, the component should take an errors property similar to other Formik components for easy error message rendering using the out-of-the-box component provided by Formik. Finally, another prop should be something like maxFileSize as there is currently no way to check the file size of a file and reject if its too big.

How can i change the color of the solid line below the input ?

Liberty_Trust_Group_App

I want to change the color of the line to red. How do i do it ?

const customzedInput = {
background: 'red !important',
}

<Input
className='customzedInput'
required='true'
name='Street Address'
label='Street Address'
// style=''
/>

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

Single file upload and refresh preview

Hello,

is there a way to allow single file uploads only and update the preview ?
onDrop cabllack is not working.

solution ?

  • add onDrop callback so we can configure it however we want it ?
  • add multiple prop, and if its single don't concat values here
    const onDrop = acceptedFiles => { setFieldValue(name, values[name].concat(acceptedFiles)) setFieldTouched(name, true) }

or is there any other solution to this problem using DropZone from formik ui?

Example how to map checkbox to multiple value field

Is it possible to define CheckBox group (e.g. multiple options mapping to the same value as array)

In case that is not currently supported, implementation proposal would be:

                <Checkbox name='valueName' label='Group label' 
                options={[
                        { value: '1', text: 'First option label' },
                         { value: '2', text: 'Secondoption label' },
                         { value: '3', text: 'Third option label' },
                      ]}
                      />

Btw, thank you for stunning lib!!!

React-Formik-UI checkbox's onChange event not accessible

I am using checkbox from react-formik-ui and it seems I am not able to access the onChange event of this component after I recently updated my react-formik-ui from version 4.0.3 to 5.1.9 and updated formik from version 2.0.8 to 2.2.6.

Implementation of the checkbox:

import {Checkbox} from 'react-formik-ui';

const RenderCheckBox = ({properties}) => {
  return (
    <Fragment key={properties.name}>
      {!properties.isHidden &&
      <FormGroup key={properties.name}>
        <ControlLabel>{properties.label} {properties.required &&
        <span className="required"> * </span>} </ControlLabel>
        <Row>
          {properties.fields.map((element, key) => {
            return (
              <Field key={key} name={element.name}>
                {(props) => {
                  const {onChange: onChangeHandler} = element;
                  const {field, form} = props;
                  return (
                    <Col key={key} className={element.className}>
                      <Checkbox key={key}
                                name={element.name}
                                required={properties.required}
                                disabled={element.isDisabled ? element.isDisabled : false}
                                text={element.label}
                                checked={properties.fields ? properties.fields.find(option => option.value === field.value) : ''}
                                onChange={event => {
                                  console.log("onChange Ran!!")
                                  if (onChangeHandler) {
                                    onChangeHandler(event);
                                  }
                                  form.handleChange(event)
                                }}
                                onBlur={form.handleBlur}
                                value={element.value}
                      />
                    </Col>
                  );
                }}
              </Field>
            )
          })}
        </Row>
      </FormGroup>
      }
    </Fragment>
  )
};

I am not able to run the onChangeHandler through onChange event and even the console log is not coming.

Types for TypeScript

Awesome lib, love it! Makes everything so much easier with my forms ❤️

I would love to have types added to this library though. I just recently started using TS so I'm not sure how important it is, but I think it would be nice to be able to skip using // @ts-ignore

how to give custom name to the submit button ?

Also on the website it says use className to change the css but it doesnt work.

Heres the full code.

[import React from 'react';
import { Formik } from 'formik'
import { Form, Input, SubmitBtn } from 'react-formik-ui';

import GetCashOfferButton from '../../components/GetCashOfferButton';

const GetCashOfferbtnStyle = {
background: '#f04134',
color: 'white',
};

export const BasicForm = () => (

<Formik
initialValues={{
textFieldExample3: '',
FirstName: '',
LastName: '',
}}
onSubmit={data => (alert(JSON.stringify(data)))}
render={() => (

  <Input
    required='true'
    placeholder='John Doe'
    name='FirstName'
    label='John'
    hint='This is a FirstName'
  />
  <Input
    required='true'
    name='LastName'
    label='LastName'
    placeholder='Doe P'
    hint='This is a LastName'
  />

  <Input
    name='Cell#'
    label='Cell#'
    hint='This is a Cell#'
  />

 <Input
    name='Email'
    label='Email'
    hint='This is a Email'
  />

<Input  
    name='Street Address'
    label='StreetAddress'
    hint='This is a Street Address'
  />

<Input  
    name='City'
    label='City'
    hint='This is a City'
  />

<Input  
    name='State+'
    label='State'
    hint='This is a State'
  />

<Input  
    name='Zip+'
    label='Zip'
    hint='This is a Zip'
  />

  <SubmitBtn name="yes" style={GetCashOfferbtnStyle} />

  <button  style={GetCashOfferbtnStyle} type="button"> Custom button  
  </button>


  <GetCashOfferButton />

</Form>

)}
/>
);

export default BasicForm;

](url)

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

Dropzone show image from url

Hi, how do I show the image from a url response in the dropzone created, I'm using a get api request to view data.

DropZone - Nested property does not work

Version
^4.0.5

Mode
All

Describe the bug
Using DropZone, if the filed name is a nested field that application fails. For example:

{
    files1: {
       files2[]
    }
}

To Reproduce
use the code below:

import { Formik } from 'formik'
import { Form, DropZone } from 'react-formik-ui';

<Formik
  initialValues={{
    files1: {
       files2[]
    }
}}
  onSubmit={data => (alert(JSON.stringify(data)))}
>
  <Form>

    <DropZone
      name='files1.files2'
      label='File upload'
      placeholder='Try dropping some files here, or click to select files to upload.'
    />

  </Form>
</Formik>

Expected behavior
nested values should be set

Additional context
The issue is at src/lib/components/DropZone/DropZone.js line 29

const files = multiple ? values[name].concat(dropedFiles) : dropedFiles

const files = multiple ? values[name].concat(dropedFiles) : dropedFiles

if the name is "files1.files2" of course values["files1.files2"] return undefined.

Can you please fix this?

Thanks

Custom Radio Button

Hello, I would like to create a custom radio radio button using this library. I am curious if I can insert a <span> after the <input>, so I can style my own radio box?

Example is not working

Facing this issue :

react-dom.development.js?cada:16543 Uncaught TypeError: Cannot read property 'handleSubmit' of undefined
    at _ (index.js?a197:1)
    at mountIndeterminateComponent (react-dom.development.js?cada:13380)
    at beginWork (react-dom.development.js?cada:13820)
    at performUnitOfWork (react-dom.development.js?cada:15863)
    at workLoop (react-dom.development.js?cada:15902)
    at renderRoot (react-dom.development.js?cada:15942)
    at performWorkOnRoot (react-dom.development.js?cada:16560)
    at performWork (react-dom.development.js?cada:16482)
    at performSyncWork (react-dom.development.js?cada:16454)
    at requestWork (react-dom.development.js?cada:16354)
_ @ index.js?a197:1
mountIndeterminateComponent @ react-dom.development.js?cada:13380
beginWork @ react-dom.development.js?cada:13820
performUnitOfWork @ react-dom.development.js?cada:15863
workLoop @ react-dom.development.js?cada:15902
renderRoot @ react-dom.development.js?cada:15942
performWorkOnRoot @ react-dom.development.js?cada:16560
performWork @ react-dom.development.js?cada:16482
performSyncWork @ react-dom.development.js?cada:16454
requestWork @ react-dom.development.js?cada:16354
scheduleWork$1 @ react-dom.development.js?cada:16218
scheduleRootUpdate @ react-dom.development.js?cada:16785
updateContainerAtExpirationTime @ react-dom.development.js?cada:16812
updateContainer @ react-dom.development.js?cada:16839
ReactRoot.render @ react-dom.development.js?cada:17122
(anonymous) @ react-dom.development.js?cada:17262
unbatchedUpdates @ react-dom.development.js?cada:16679
legacyRenderSubtreeIntoContainer @ react-dom.development.js?cada:17258
render @ react-dom.development.js?cada:17317
(anonymous) @ index.js?1fdf:26
./src/index.js @ index-e900d2c8cb926e7f7829.bundle.js:1
o @ index-e900d2c8cb926e7f7829.bundle.js:1
t @ index-e900d2c8cb926e7f7829.bundle.js:1
0 @ index-e900d2c8cb926e7f7829.bundle.js:1
o @ index-e900d2c8cb926e7f7829.bundle.js:1
./node_modules/@babel/runtime/helpers/extends.js @ index-e900d2c8cb926e7f7829.bundle.js:1
(anonymous) @ index-e900d2c8cb926e7f7829.bundle.js:1
client?54b4:77 

Package versions :
Formik : [email protected]
React Formik UI : [email protected]

Support for current version of formik

First of all, thank you for creating this library for formik.
I have noticed that react-formik-ui does not work with current version of formik, so do you plan to support it?
Or do you accept PRs? If no, do you mind if I fork this repo and publish my own version of it on npm?

Allow components to be imported individually.

Is your feature request related to a problem? Please describe.
I want to be able to import components individually like:

import DropZone from 'react-formik-ui/dist/components/DropZone'

because of multiple reasons:

  • Importing react-formik-ui on NextJS yields the following error:
error - ./node_modules/flag-icon-css/css/flag-icon.css
Global CSS cannot be imported from within node_modules.
Read more: https://err.sh/next.js/css-npm
Location: node_modules/react-flag-icon-css/module/styles.js

Running npm ls makes it clear that this is caused by the react-phonenr-input:

$ npm ls react-flag-icon-css
[email protected] /Users/jari/Work/[redacted]
└─┬ [email protected]
  └─┬ [email protected]
    └── [email protected]

...which is not even an component I'm going to use at this moment.

  • Treeshaking, currently I'm only using DropZone, but now I get a lot of other components in my bundle that I'm not even gonna use.

Describe the solution you'd like
Currently, only the declarations get emitted for the individual components, not their respective JS files.
Let's also emit JS files.

Describe alternatives you've considered
I've copied the Dropzone file into my own codebase now, and that works fine, but I'd rather not do that.

Datepicker autocomplete not disabling or not working correct

Version
"react-formik-ui": "1.2.4"

Mode
Default

Describe the bug
can we disable autocomplete/Datepicker's previously filled values to display , because if a user click on one of them , they are not selected at all. so either we stop displaying them or they should be selected somehow.

Datepicker is not behaving well with time

I need enable timepicker too for my date picker but its always selecting 12:00 AM , looks like its not supporting time.

<Datepicker
                            showTimeSelect
                            timeFormat="HH:mm"
                            timeIntervals={30}
                            dateFormat="DD.MM.YYYY hh:mm a"
                            timeCaption="time"
                            required
                            name="valid_from"
                            label='Valid From'
                            minDate={new Date()}
                            maxDate={this.addMonths(10)}
                            />

Custom input mask

Is possible have a input mask with this : 999.999.999-99

some example in the documentation

Country Picker for phone and country fields

Is your feature request related to a problem? Please describe.
No.
Describe the solution you'd like
Phone and country fields are mandatory in many application process esp. in mobile application. User can select his/her country code from the list.

Describe alternatives you've considered
react-telephone-input

Additional context
Add any other context or screenshots about the feature request here.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.