Passing custom input in AVField

[RishabhTayal]

Is there a way to use this library with a custom input for e.g. a color picker?

[GoPro16]

There are ways you can do this, however I am not sure how effective it will work in the case of a color picker. You can pass the custom input you are trying to render as a tag prop. This will overwrite the standard input and replace it with what you put in.

It is a contract though because the component you are using still needs to be able to accept a value prop and all of the below validation props from the base input itself. https://github.com/Availity/availity-reactstrap-validation/blob/master/src/AvBaseInput.js#L223

We are looking into a more long term solution to these unique situations where you can pull the context of the form in and do whatever you want.

You could also look into creating a custom input that extends AvBaseInput and have that component render the Color Picker

[halfmooneye]

How can I check if the validation is passed or not inside the extended component's render function? So that I can custom render the tooltip for validation (e.g 'This field is required')

class AvSwitch extends AvBaseInput { constructor(props) { super(props) }

render() { const { name, value, onChange, validate, style, options, inline } = this.props console.log(this) // want to know here if the validation is checked or not (e.g this.isValidated) // Also want to know how I can get the validate callback message return ( <ToggleSwitch Name={name} id={name} defaultChecked={value === options[0].value} checked={value} onChange={onChange} Text={[options[0].label, options[1].label]} style={{ display: inline ? 'inline-block' : 'inherit' }} /> ) } }

<AvSwitch style={{ margin: '5px 0px 10px 10px' }} name={field} value={value} options={mOptions} validate={{ async: (value, ctx, input, cb) => { if (mOptions.findIndex(option => option.value === value) < 0) { cb(_.get(global, 'validations.required') || 'This field is Required') return false } return true }, }} />