Skip to content

v0.5.7

Choose a tag to compare

@EthanBarlo EthanBarlo released this 17 Jul 14:03
· 12 commits to main since this release

Added a new useErrorBag hook.
Which makes the error bag from laravel validation available for use.

const $wire = useWire();
const [userName, setUserName] = useEntangle<string>('user_name');
const errors = useErrorBag();

useEffect(() => {
    console.log({
        errors
    })
}, [errors]);


return <> 
{/* ....... */}
<TextInput value={userName} onChange={setUserName} hasErrors={errors['user_name'] !== null}/>
<ErrorMessage error={errors['user_name']}/>

<Button onClick={() => $wire.save()}>Save</Button>
</>

Multiple errors can be returned,
So we also have a provided type, that can be used to help with the ErrorMessage component

import { ErrorBagItem } from '@livewiremesh/react/hooks/useErrorBag';

interface IError extends React.HTMLProps<HTMLParagraphElement> {
    error?: ErrorBagItem;
}
const Error: React.FC<IError> = ({ message, error, className, ...props }) => {
    if (!error) return null;
    return (
        <p className={cn('text-red-500 error', className)} {...props}>
            {error &&
                error.map((item) => (
                    <span key={item} className="block">
                        {item}
                    </span>
                ))}
        </p>
    );
};

export default Error;