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