How to use the @formiz/core.useField function in @formiz/core
To help you get started, we’ve selected a few @formiz/core examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
ivan-dalmet / formiz / docs / docs / demos / components / MyField.js View on Github 
export const MyField = (props) => {
const {
value, setValue, errorMessage, isValid,
} = useField(props);
const { label } = props;
return (
<div>
<label>
{ label }
</label>
<input type="text"> setValue(e.target.value)}
/>
{!isValid && (
<div>
{ errorMessage }
</div>
)}</div>export const FieldInput = (props) => {
const {
errorMessage,
id,
isValid,
isSubmitted,
resetKey,
setValue,
value,
} = useField(props);
const {
label, type, required, placeholder, helper, ...otherProps
} = props;
const [isTouched, setIsTouched] = useState(false);
const showError = !isValid && (isTouched || isSubmitted);
useEffect(() => {
setIsTouched(false);
}, [resetKey]);
const formGroupProps = {
errorMessage,
helper,
id,
isRequired: !!required,
label,export const FieldSelect = (props) => {
const {
errorMessage,
id,
isValid,
isSubmitted,
resetKey,
setValue,
value,
} = useField(props);
const {
label, options, required, placeholder, helper, ...otherProps
} = props;
const [isTouched, setIsTouched] = useState(false);
const showError = !isValid && (isTouched || isSubmitted);
useEffect(() => {
setIsTouched(false);
}, [resetKey]);
const formGroupProps = {
errorMessage,
helper,
id,
isRequired: !!required,
label,export const FieldTextarea = (props) => {
const {
errorMessage,
id,
isValid,
isSubmitted,
resetKey,
setValue,
value,
} = useField(props);
const {
label, required, placeholder, helper, ...otherProps
} = props;
const [isTouched, setIsTouched] = useState(false);
const showError = !isValid && (isTouched || isSubmitted);
useEffect(() => {
setIsTouched(false);
}, [resetKey]);
const formGroupProps = {
errorMessage,
helper,
id,
isRequired: !!required,
label,export const FieldPickIdenticalImages = (props) => {
const {
errorMessage,
id,
isValid,
isSubmitted,
setValue,
value,
valueDebounced,
} = useField(props);
const {
label,
required,
options,
helper,
validMessage,
...otherProps
} = props;
const { selectedImages: selectedImagesDebounced } = valueDebounced || { selectedImages: [] };
const showError = !isValid && (selectedImagesDebounced.length >= 2 || isSubmitted);
const { selectedImages } = value || { selectedImages: [] };
const formGroupProps = {
errorMessage,
helper,@formiz/core
Core package for the [Formiz](https://formiz-react.com) library.
