Configuration

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

linkComponent

By default, every component accepting a

href

prop will render a respective

<a>

tag. However, many web frameworks, e.g. Next.js

(new tab)

, 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, ActionLink } from '@carla/flora'
import NextLink from 'next/link'

const config = {
  linkComponent: ({ children, href, ...linkProps }) => {
    if (!href) {
      return <span {...linkProps}>{children}</span>
    }

    // 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.startsWith('/')) {
      return (
        <NextLink href={href}>
          <a {...linkProps}>{children}</a>
        </NextLink>
      )
    }

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

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

import React from 'react'
import { ConfigProvider, ActionLink } from '@carla/flora'
import NextLink from 'next/link'

const config = {
  linkComponent: ({ children, href, ...linkProps }) => {
    if (!href) {
      return <span {...linkProps}>{children}</span>
    }

    // 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.startsWith('/')) {
      return (
        <NextLink href={href}>
          <a {...linkProps}>{children}</a>
        </NextLink>
      )
    }

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

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

Constants

A common pattern is to expose some global constants to an app.
That could either be fixed sizes for elements that have a fixed position such as the navigation.
Another common type of constants are z-indices.

const constants = {
  HEADER_HEIGHT: 70,
  zIndex: {
    COOKIES: 3,
    HEADER: 2,
    MODAL: 1,
  },
}

const config = {
  ...baseConfig,
  constants,
}

const constants = {
  HEADER_HEIGHT: 70,
  zIndex: {
    COOKIES: 3,
    HEADER: 2,
    MODAL: 1,
  },
}

const config = {
  ...baseConfig,
  constants,
}

Accessing Config

Similar to Theming, Flora exports a hook that will return the current config.

import { Box, useConfig } from '@carla/flora'

function Component() {
  const config = useConfig()

  return (
    <Box
      height={config.constants.HEADER_HEIGHT}
      extend={{ zIndex: config.constants.zIndex.HEADER }}>
      Header
    </Box>
  )
}

import { Box, useConfig } from '@carla/flora'

function Component() {
  const config = useConfig()

  return (
    <Box
      height={config.constants.HEADER_HEIGHT}
      extend={{ zIndex: config.constants.zIndex.HEADER }}>
      Header
    </Box>
  )
}