Custom input types

[mattbrewer-educredu]

Hello,

I came across this project in my travels while looking for a good way to implement some Joi validation in React and really how this project is laid out conceptionally. I realize its still in early implementation and before I take it for a spin I'd like to know if there is an easy way to add custom input types (such as text, textarea, select)?

The reason I ask is I'd be interested in using more complicated field types such as multiselect or tag inputs and I'm okay with having to roll these features myself if there is a well defined way to add them in without going down the rabbit hole too far. I've seen the documentation for the custom components which makes sense, but I'm really interested in expanding the input types as they seem somewhat limited right now.

[bentatum]

Hey Matt. Just plugin your custom component into JoifulForm's elementTypes prop. Right now you would have to do this on every form you create. It may be more pragmatic to plugin custom components globally in context. One of us will probably look into that. For now, though - this is how you would go about it:

import { JoifulForm, JoifulInput } from 'joiful-react-forms'

const MyCustomTextarea = (props) => <textarea {...props}/>

const SpecialDropDownInput = (props) => ...

const MyForm = () =>
    <JoifulForm
        elementTypes={{
            textarea: MyCustomTextarea,
            youCanNameThemAnything: SpecialDropDownInput
        }}
        schema={{...}}
    >
        <JoifulInput is="textarea" name="..."/>
        <JoifulInput is="youCanNameThemAnything" name="..."/>
    </JoifulForm>

[bentatum]

It should also be noted that we provide the error message in the error prop. In a custom element, it might be used like this.

const MySpecialPasswordInput = ({ error, ...props }) =>
    <div>
        <input type="password" {...props}/>
        <If condition={error}>
            <span>{error}</span>
        </If>
    </div>

[bentatum]

update: as of https://github.com/kjanoudi/joiful-react-forms/pull/12 you can define custom input components in your application's context.

[bentatum]

Thinking about this some more. It would also be nice to be able to plug in element type at the JoifulInput level. Something like this:

<JoifulInput
    is={CustomElement}
    name="my-input"
/>