Example: using a custom input
components/rate.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
import classnames from 'classnames';
import { RFBInputCommonProps } from '@ferdotnet/reactive-form-builder';
const Rate = ({ onChange, value = 0 }: { value: 0 | 1 | 2 | 3 | 4 | 5 } & RFBInputCommonProps) => {
const handleSelect = (newValue: number) => () => {
onChange(newValue === value ? 0 : newValue);
};
return (
<div className="rate">
{Array.from({ length: 5 }, (_, i) => (
<svg
key={i + 1}
className={classnames('star', { selected: i + 1 <= value })}
onClick={handleSelect(i + 1)}
viewBox="0 0 32 30"
>
<path d="M31.77 11.857H19.74L15.99.5l-3.782 11.357H0l9.885 6.903-3.692 11.21 9.736-7.05 9.796 6.962-3.722-11.18 9.766-6.845z" />
</svg>
))}
</div>
);
};
export default Rate;
./schema.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import joi from 'joi';
// import { Input, Select, Textarea, CheckList, RadioList } from '@ferdotnet/reactive-form-builder';
// or, import here your custom inputs if needed
const schema = {
rate: {
value: 0,
label: 'Rate',
input: Rate,
joi: joi.number().min(1).required().messages({
'number.min': messages.REQUIRED
})
}
}
export default schema;./yourComponent.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import React from 'react';
import { useReactiveFormBuilder, ReactiveFormBuilder } from '@ferdotnet/reactive-form-builder';
import schema from './schema';
const MyComponent = () => {
const handler = useReactiveFormBuilder(schema, true); // Second param is to debug
const handleSubmit = (event: React.FormEvent) => {
event.preventDefault();
alert(JSON.stringify(handler.data));
};
return (
<form onSubmit={handleSubmit}>
<ReactiveFormBuilder handler={handler} />
<button type="submit" disabled={!handler.valid}>
Submit
</button>
</form>
);
};
export default MyComponent;