question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

What about custom component and validate props for the redux field?

See original GitHub issue

Hey, saw you at the PHPUK conference the other day, great talk!

Wanted to checkout this liform library, as loading a redux-form from a json file is exactly what I was looking for.

Question is, does it have the ability to use custom component and validate props for the redux Field?

So for example how would I map out the following in the json:

        <Field
          name="email"
          component={TextField} // custom component I import
          type="email"
          label={t('form.label.email')}
          validate={[required, email]} // email and required are custom validatiors I import
        />
        <Button
          type="submit"
          disabled={ this.props.submitting }
          text={t('form.button.submit')}
        />

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Comments:6 (3 by maintainers)

github_iconTop GitHub Comments

2reactions
nacmartincommented, Mar 1, 2017

Hi, About the i18n. We don’t have that need at the moment but I think that it is important to have it as soon as possible, so I have added support for using it in custom widgets (the default theme doesn’t have it because it would mean to choose a i18n lib and force people to download it with this library).

It was technically posible to decorate custom fields with the react-i18n next decorator to have i18n, but I guess that it is better to just decorate the form, so now it is possible.

So there is now a 4th example in https://nacmartin.github.io/liform-daniel-example/

https://github.com/nacmartin/liform-daniel-example/blob/master/src/js/Example4.js

Basically you can now pass a “context” object https://github.com/nacmartin/liform-daniel-example/blob/a69542329aebf65ff22426bb93721b80b09c3e49/src/js/Example4.js#L104

And then it is available in the fields you write: https://github.com/nacmartin/liform-daniel-example/blob/a69542329aebf65ff22426bb93721b80b09c3e49/src/js/Example4.js#L18

There is also the built-in validation, in that case I’d pass your own sync validator based on the one that liform-react is using, but translating the messages with the i18n addon of the ajv validator.

1reaction
danielantelocommented, Feb 26, 2017

Thanks so much, I will be giving it a go this coming week. Great idea, glad I found you at the conference 😃 keep up the great work!

Read more comments on GitHub >

github_iconTop Results From Across the Web

Will `redux-form` work with a my custom input component?
But let's say that you have a custom component called MyStrangeInput that has currentValue and thingsChanged props that expect the value to be...
Read more >
Use a Custom Input Component as a redux-form Field
We can pass a custom component to redux-form's Field component. This way, we have a great deal of control over what gets rendered...
Read more >
Custom Form Validation in React with Redux Middleware
Actions are dispatched to the store, the store uses a reducer to change state and broadcast the new state to our components, and...
Read more >
How to pass custom props to validate function in redux-form?
@YuryTarabanko i changed the validate function to test it out on the individual Field components and not the form, but either way even...
Read more >
React + Redux Form | Alex Martinez
Redux Form's documentation provides example validation functions, but you can also create custom functions to check input field values any way ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found