@taktikal/ui
v4.6.0
Published
## What is this package for?
Downloads
55
Readme
@taktikal/ui
What is this package for?
Sharing Taktikal's core UI components between projects.
Getting started
Please follow the instructions in @taktikal/branding
's Getting Started section.
After the @taktikal/branding
package has been configured, localization needs to be configured for this package.
Configuration
This package can be configured by calling configTaktikalUI
with a valid options object.
There's only one config option currently, which is the i18nHook
. It is currently only used to resolve the error messages for Textfield
. An example configuration looks like so:
import { configTaktikalUI, TaktikalUII18nHook } from "@taktikal/ui";
import { useTranslation } from "react-i18next";
const useTaktikalUiI18n: TaktikalUII18nHook = () => {
const { t } = useTranslation();
return (key) => t(`default:taktikal_ui.${key}`) as string;
};
configTaktikalUI({
i18nHook: useTaktikalUiI18n,
});
The Icelandic version of the default
locale looks like so:
{
"taktikal_ui": {
"fieldRequired": "Þessi reitur er nauðsynlegur",
"ssnRequired": "Vinsamlegast sláðu inn kennitölu",
"ssnInvalid": "Kennitala verður að vera 10 tölustafir",
"emailRequired": "Vinsamlegast sláðu inn netfangið þitt",
"emailInvalid": "Þetta er ekki gilt netfang",
"phoneRequired": "Vinsamlegast sláðu inn símanúmer",
"phoneInvalid": "Símanúmer verður að vera 7 tölustafir",
"companySsnInvalid": "Kennitala fyrirtækis verður að byrja á 32 eða hærra"
},
// ...
}
With @taktikal/ui
configured we can get to using the package.
Usage
The package exports a variety of UI components that can be used in React projects. The full list of components looks like so:
- Block
- Button
- FadeSwap
- HorizontalList
- PhoneIndicator
- Textfield
- Select
- FieldLabel
- HighlightText
These components can be imported like so:
import { Textfield } from "@taktikal/ui";
See https://ui.taktikal.is for usage examples.