@comparaonline/ui-form-errors

yarn add @comparaonline/ui-form-errors

Usage no npm install needed!

<script type="module">
  import comparaonlineUiFormErrors from 'https://cdn.skypack.dev/@comparaonline/ui-form-errors';
</script>

README

@comparaonline/ui-form-errors

Installation

yarn add @comparaonline/ui-form-errors

Usage

This package exposes a ErrorMessages context using ErrorMessageProvider and ErrorMessagesConsumer. A utility called replacer can be used to use templates that follow this convention

'The min value is {{minValue}} and the maxValue is {{maxValue}}'

... in your ErrorMessagesConsumer.

ErrorMessagesProvider

import { ErrorMessagesProvider } from '@comparaonline/ui-form-errors';

interface ErrorMessages = {
  [errorCode: string]: string
}

const errorMessages: ErrorMessages = {
  required: 'This field is required',
  outOfRange: 'The min value is {{minValue}} and the maxValue is {{maxValue}}'
}

<ErrorMessagesProvider value={{ errorMessages }}>
  ...
</ErrorMessagesProvider>

ErrorMessagesConsumer

<ErrorMessagesConsumer>
  {({ errorMessages }) => ()}
</ErrorMessagesConsumer>