Utilities

Container

A simple component used as a responsive main container.

import Container from '~/core/ui/Container';

function MyPage({ value, children }) {
  return (
    <Container>
      { children }
    </Container>
  );
}

If

The If component is useful to conditionally render the children components based on a condition:

import If from '~/core/ui/If';

function Component({ value, children }) {
  return (
    // this `children` tree will only render if `value` is truthy
    <If condition={value}>
      { children }
    </If>
  );
}

It's also possibly to pass a fallback parameter to conditionally render a fallback component if condition is falsy.

import If from '~/core/ui/If';

function Component({ loading, children }) {
  return (
    <If
      condition={!loading}
      fallback={<span>Loading...</span>}
    >
      { children }
    </If>
  );
}

ClientOnly

The ClientOnly component is useful to only render the children components if the component is being rendered in a browser environment:

import ClientOnly from '~/core/components/ClientOnly';

function Component({ children }) {
  return (
    <ClientOnly>
      { children }
    </ClientOnly>
  );
}

LazyRender

The LazyRender component is useful to render the component's children tree only when visible (or when being intersected according to your configuration).

Very useful for SEO and performance improvements.

import LazyRender from '~/core/components/LazyRender';

function Component({ children }) {
  return (
    <LazyRender>
      { children }
    </LazyRender>
  );
}

You can supply an additional parameter rootMargin, which is the Intersection Observer parameter that controls the configuration of the intersection.