Configuration

Coral requires that you have the CoralConfigProvider at the App level of your project. This is a wrapper component that provides extra configuration to most of the components.

This provider also enables other features via the config prop like:

Default prop overrides
Default icon overrides
Global Link settings

Basic Usage


import { CoralConfigProvider } from '@krakentech/coral';
 
<CoralConfigProvider>...</CoralConfigProvider>;

Note: It’s best to put the CoralConfigProvider as high up the component tree as possible, at the App level is recommended.

Link component

The LinkComponent configuration exists at the config level to save projects having to set this across every Link component in a project.

Components that will use this configuration under the hood:

ActionCard
BreadcrumbsLink
Button
Link
Header
PageNavigation
Chip


import NextLink from 'next/link';
 
<CoralConfigProvider config={{ LinkComponent: NextLink }}>
    ...
</CoralConfigProvider>;

Default Icons

Some of Coral’s atoms make use of @krakentech/icons to render out contextually relevant icons (think ‘Show Password’ and ‘Hide Password’ in the login form). If you have your own icon set, you can target these default icons in the theme provider. All of the icons that can be overwritten are listed below – you will need to pass your own custom svg elements.


<CoralConfigProvider
    config={{
        defaultIcons: {
            IconAccount: <svg>...</svg>,
            IconChevronDown: <svg>...</svg>,
            IconChevronRight: <svg>...</svg>,
            IconChevronUp: <svg>...</svg>,
            IconDismiss: <svg>...</svg>,
            IconInfo: <svg>...</svg>,
            IconError: <svg>...</svg>,
            IconSuccess: <svg>...</svg>,
            IconWarning: <svg>...</svg>,
            IconInfoOutlined: <svg>...</svg>,
            IconErrorOutlined: <svg>...</svg>,
            IconSuccessOutlined: <svg>...</svg>,
            IconWarningOutlined: <svg>...</svg>,
            IconQuote: <svg>...</svg>,
            IconMenu: <svg>...</svg>,
            IconCheck: <svg>...</svg>,
            IconStar: <svg>...</svg>,
            IconMinus: <svg>...</svg>,
            IconLogout: <svg>...</svg>,
            IconShowPassword: <svg>...</svg>,
            IconHidePassword: <svg>...</svg>,
            IconSort: <svg>...</svg>,
            IconQuestion: <svg>...</svg>,
            IconUpload: <svg>...</svg>,
        },
    }}
>
    ...
</CoralConfigProvider>

Optional indicator

The optional indicator shows when optional is set to true on any atoms that support the property. Please note that the optional indicator is only visual, it does not control the required or optional state of the atom, it only appends the optionalIndicator to the label of the field.

Consumers will need to control the validation schema of their forms externally from Coral.


<CoralConfigProvider config={{ optionalIndicator: '(optional)' }}>
    ...
</CoralConfigProvider>

Header height

It’s possible to plug the height of the Header into the CoralConfigProvider for later use. This is useful if you want to get the height of the Header in certain components around your app.