NoData example

The template already includes a title and default description, you only need to specify the illustration type. You can provide a custom description and additional elements, if you need.

TIP

The locale can be passed directly to the component or wrap your application in I18nProvider from the intergalactic/utils package, as shown in the example below.

import React from 'react';
import Select from 'intergalactic/select';
import { I18nProvider } from 'intergalactic/utils/lib/enhances/WithI18n';
import { NoData } from 'intergalactic/widget-empty';
import Card from 'intergalactic/card';
import Button from 'intergalactic/button';
import { Box } from 'intergalactic/flex-box';

const options = [
  'en',
  'de',
  'es',
  'fr',
  'it',
  'nl',
  'pl',
  'pt',
  'sv',
  'vi',
  'tr',
  'zh',
  'ja',
  'ko',
].map((o) => ({
  value: o,
  children: o,
}));

const Demo = () => {
  const [lang, setLang] = React.useState('en');

  return (
    <div>
      Select language: <Select options={options} value={lang} onChange={setLang} />
      <I18nProvider value={lang}>
        <Card mt={4}>
          <Card.Header>
            <Card.Title>Line chart</Card.Title>
          </Card.Header>
          <Card.Body>
            <NoData type='line-chart' />
          </Card.Body>
        </Card>
        <Card mt={4}>
          <Card.Header>
            <Card.Title>Nothing found</Card.Title>
          </Card.Header>
          <Card.Body>
            <NoData type='nothing-found'>
              <Box mt={4}>
                <Button use='secondary'>Clear filters</Button>
              </Box>
            </NoData>
          </Card.Body>
        </Card>
      </I18nProvider>
    </div>
  );
};

export default Demo;

Error example

The template already includes default title, icon and description. You can provide a custom description and additional elements if you need.

import React from 'react';
import Select from 'intergalactic/select';
import { Box } from 'intergalactic/flex-box';
import { I18nProvider } from 'intergalactic/utils/lib/enhances/WithI18n';
import { Error } from 'intergalactic/widget-empty';
import Card from 'intergalactic/card';
import Button from 'intergalactic/button';
import ReloadM from 'intergalactic/icon/Reload/m';
import Link from 'intergalactic/link';

const options = [
  'en',
  'de',
  'es',
  'fr',
  'it',
  'nl',
  'pl',
  'pt',
  'sv',
  'vi',
  'tr',
  'zh',
  'ja',
  'ko',
].map((o) => ({
  value: o,
  children: o,
}));

const Demo = () => {
  const [lang, setLang] = React.useState('en');

  return (
    <div>
      Select language: <Select options={options} value={lang} onChange={setLang} />
      <I18nProvider value={lang}>
        <Card mt={4}>
          <Card.Header>
            <Card.Title>Known error</Card.Title>
          </Card.Header>
          <Card.Body>
            <Error>
              <Box mt={4}>
                <Button addonLeft={ReloadM}>Reload page</Button>
              </Box>
            </Error>
          </Card.Body>
        </Card>
        <Card mt={4}>
          <Card.Header>
            <Card.Title>Unknown error</Card.Title>
          </Card.Header>
          <Card.Body>
            <Error
              description={
                <>
                  Please try again later. If the problem persists, contact us at{' '}
                  <Link href='mailto:mail@semrush.com'>mail@semrush.com</Link>
                </>
              }
            >
              <Box mt={4}>
                <Button addonLeft={ReloadM}>
                  <Button.Text>Reload page</Button.Text>
                </Button>
              </Box>
            </Error>
          </Card.Body>
        </Card>
      </I18nProvider>
    </div>
  );
};

export default Demo;

Custom examples

You can create custom messages, such as the "Set up your tool" message.

To get the link to the illustration, use the function getIconPath from the package.

import React from 'react';
import { Box } from 'intergalactic/flex-box';
import Button from 'intergalactic/button';
import Card from 'intergalactic/card';
import WidgetEmpty, { getIconPath } from 'intergalactic/widget-empty';

const Demo = () => {
  return (
    <div>
      <Card mt={4}>
        <Card.Header>
          <Card.Title>[Tool Name]</Card.Title>
        </Card.Header>
        <Card.Body>
          <WidgetEmpty icon={getIconPath('combined-chart')}>
            <WidgetEmpty.Title>Set up your [Tool Name]</WidgetEmpty.Title>
            <WidgetEmpty.Description>
              [Tool Name] allows you to get daily updates on positions in Google's top 100 organic
              and paid search results.
            </WidgetEmpty.Description>
            <Box mt={4}>
              <Button theme='success' use='primary'>
                Set up [Tool Name]
              </Button>
            </Box>
          </WidgetEmpty>
        </Card.Body>
      </Card>
    </div>
  );
};

export default Demo;

You can find other examples of custom messages you can create with the WidgetEmpty component.

import React from 'react';
import Card from 'intergalactic/card';
import WidgetEmpty, { getIconPath } from 'intergalactic/widget-empty';

const Demo = () => {
  return (
    <div>
      <Card mt={4}>
        <Card.Header>
          <Card.Title>Congratulations!</Card.Title>
        </Card.Header>
        <Card.Body>
          <WidgetEmpty icon={getIconPath('good')}>
            <WidgetEmpty.Title>Good results</WidgetEmpty.Title>
            <WidgetEmpty.Description>Wow! You are doing great!</WidgetEmpty.Description>
          </WidgetEmpty>
        </Card.Body>
      </Card>
      <Card mt={4}>
        <Card.Header>
          <Card.Title>Keep going!</Card.Title>
        </Card.Header>
        <Card.Body>
          <WidgetEmpty icon={getIconPath('nexttime')}>
            <WidgetEmpty.Title>Next time will be better</WidgetEmpty.Title>
            <WidgetEmpty.Description>Keep going to achieve good results.</WidgetEmpty.Description>
          </WidgetEmpty>
        </Card.Body>
      </Card>
    </div>
  );
};

export default Demo;