Configuration

Apart from theming, VCC UI ships another context provider which is used for configuration. It can be used to configure custom rendering logic.

locale

Some VCC UI features are language specific. By passing a locale to the ConfigProvider, Volvo Fonts will not be included for unsupported languages, and the theme direction will be automatically set.

import React from 'react';
import { ConfigProvider } from 'vcc-ui';

export const App = () => {
  const locale = getCurrentLocale();
  return (
    <ConfigProvider config={{ locale }}>
      <MyPage />
    </ConfigProvider>
  );
};

import React from 'react';
import { ConfigProvider } from 'vcc-ui';
export const App = () => {
  const locale = getCurrentLocale();
  return (
    <ConfigProvider config={{ locale }}>
      <MyPage />
    </ConfigProvider>
  );
};

linkComponent

By default, every component accepting a href prop will render a respective <a> tag. However, many web frameworks, e.g. Next.js, provide a custom Link component that is used for client-side routing. Instead of wrapping every linkable component with that Link component, we can configure the linkComponent using the ConfigProvider.

import React from 'react';
import { ConfigProvider, Link } from 'vcc-ui';
import NextLink from 'next/link';

const config = {
  linkComponent: ({ children, href, ...linkProps }) => {
    // we only want to use next/link for internal links
    // external links are better served with an basic a tag
    if (typeof href === 'object' || href.indexOf('/') === 0) {
      return (
        <NextLink href={href}>
          <a {...linkProps}>{children}</a>
        </NextLink>
      );
    }

    return (
      <a href={href} {...linkProps}>
        {children}
      </a>
    );
  },
};

export const App = () => (
  <ConfigProvider config={config}>
    <Link href="/subpage">Go to sub page</Link>
  </ConfigProvider>
);

import React from 'react';
import { ConfigProvider, Link } from 'vcc-ui';
import NextLink from 'next/link';
const config = {
  linkComponent: ({ children, href, ...linkProps }) => {
    // we only want to use next/link for internal links
    // external links are better served with an basic a tag
    if (typeof href === 'object' || href.indexOf('/') === 0) {
      return (
        <NextLink href={href}>
          <a {...linkProps}>{children}</a>
        </NextLink>
      );
    }
    return (
      <a href={href} {...linkProps}>
        {children}
      </a>
    );
  },
};
export const App = () => (
  <ConfigProvider config={config}>
    <Link href="/subpage">Go to sub page</Link>
  </ConfigProvider>
);

Configuration
locale
linkComponent

Configuration
locale
linkComponent