useSetup

A hook to setup the library-wide settings.

Properties

Property	Type	Component	Description
requiredIndicatorSymbol	string	RequiredIndicator	The symbol to use for the required indicator.
passwordTriggerHiddenText	string	PasswordTrigger	The text to use for the password trigger aria-label when the password is hidden.
passwordTriggerVisibleText	string	PasswordTrigger	The text to use for the password trigger aria-label when the password is visible.

Setters

Property	Setter
requiredIndicatorSymbol	setRequiredIndicatorSymbol(symbol: string): void
passwordTriggerHiddenText	setPasswordTriggerHiddenText(text: string): void
passwordTriggerVisibleText	setPasswordTriggerVisibleText(text: string): void

Examples

Set the required indicator symbol

React

import {
  RequiredIndicator,
  useSetup,
} from '@fintech-sandpit/ui/react';

const { setRequiredIndicatorSymbol } = useSetup();

setRequiredIndicatorSymbol('!');

return (
  <div>
    <p>
      <RequiredIndicator /> indicates a required field.
    </p>
  </div>
);

Vue

<script setup lang="ts">
import {
  RequiredIndicator,
  useSetup,
} from '@fintech-sandpit/ui/vue';

const { setRequiredIndicatorSymbol } = useSetup();

setRequiredIndicatorSymbol('!');
</script>

<template>
  <div>
    <p>
      <RequiredIndicator /> indicates a required field.
    </p>
  </div>
</template>