final-form / react-final-form-html5-validation

A swap-in replacement for 🏁 React Final Form's <Field> component to provide HTML5 Validation
MIT License
57 stars 8 forks source link

Added support for functions as validation message props #12

Closed BowlingX closed 5 years ago

BowlingX commented 5 years ago

Thank you so much for this library. This pull request will add the ability to specify functions as message props:

Example

<Html5ValidationField
  tooShort={(value, { minLength }) => `Value ${value} should have at least ${minLength} characters.`}
  minLength={8} 
  name="foo"
/>

This is especially usefull when defining default translation messages for all fields (here with react-intl):

import { injectIntl, defineMessages } from 'react-intl'

const messages = defineMessages({
   valueMissing: 'Value missing',
   minLength: 'Value should have at least {minLength} characters',
   /*... more messages ...*/
})
const defaultMessages = {
  valueMissing: (_, { formatMessage } ) => formatMessage(messages.valueMissing),
  minLength: (_, { formatMessage, minLength } ) => formatMessage(messages.minLength, { minLength }),
/*... more messages ...*/
}
const FieldWithDefaults = injectIntl(({ intl: { formatMessage }, ...rest }) => <Field formatMessage={formatMessage} {...defaultMessages} {...rest } />)

Currently this requires to create an object on each render with default messages based on the Field's props. I think this would provide a more elegant and performant way.

codecov[bot] commented 5 years ago

Codecov Report

Merging #12 into master will not change coverage. The diff coverage is 100%.

Impacted file tree graph

@@          Coverage Diff          @@
##           master    #12   +/-   ##
=====================================
  Coverage     100%   100%           
=====================================
  Files           2      2           
  Lines          36     38    +2     
  Branches       16     17    +1     
=====================================
+ Hits           36     38    +2
Impacted Files Coverage Δ
src/Html5ValidationField.js 100% <100%> (ø) :arrow_up:

Continue to review full report at Codecov.

Legend - Click here to learn more Δ = absolute <relative> (impact), ø = not affected, ? = missing data Powered by Codecov. Last update 090a232...dab9c8a. Read the comment docs.

BowlingX commented 5 years ago

Anything else you require for merging / checking this PR?

BowlingX commented 5 years ago

@erikras This pull request is already quite long in the pipeline, do you request any more comment / feedback, tests etc.?

erikras commented 4 years ago

Published in v1.1.0.