React Reference

Home

react

Getting started with Bifrost React

TL;DR Quick-install bifrost-react and icon packages

Fresh project? Try our react project template

Only need the CSS, or not using React?

Node.js and `npm` is required

Install an up-to-date version of Node.js (if you haven't already).

Intility NPM registry (Optional)

@intility/bifrost-react is available from public npmjs registry, but FontAwesome Pro icons and some other @intility/* packages are only available from npm.intility.com.

If you haven't already, set up your machine to use the Intility NPM registry

Install bifrost-react package

npm install @intility/bifrost-react
npm install @intility/bifrost-react

Append @latest npm tag if you have already installed Bifrost and want to update to the latest version.

Install icon packages

The following command installs all the fontawesome pro packages.

This will only work if you have set up intility NPM registry or configured npm with a license token, you may instead wish to only install the packages you need (only free ones?) instead.

npm install @fortawesome/pro-solid-svg-icons@7 @fortawesome/pro-regular-svg-icons@7 @fortawesome/pro-light-svg-icons@7 @fortawesome/pro-duotone-svg-icons@7
npm install @fortawesome/pro-solid-svg-icons@7 @fortawesome/pro-regular-svg-icons@7 @fortawesome/pro-light-svg-icons@7 @fortawesome/pro-duotone-svg-icons@7

If you get TypeScript errors when trying to pass icon references to bifrost components, try deleting your node_modules and package-lock.json, then reinstall with npm install.

Get started with example code

See setup examples for basic app structure.

Import CSS

If you didn't start with a setup example snippet, make sure you import the Bifrost CSS in your app:

import "@intility/bifrost-react/bifrost-app.css";
import "@intility/bifrost-react/bifrost-app.css";

Important!

If your build system bundles CSS files (most do) bifrost-app.css needs to be the first CSS file to make sure font files will be loaded properly.

Scrollbar styling (optional)

If you want a Bifrost-styled scrollbar, see the Scrollbar example page.

Screens with a notch (a.k.a. busslomme)

Bifrost adds appropriate safe-area padding for devices with a notch in the display (a.k.a. "busslomme"), which requires the following <meta> tag in your index.html (also see Layout/Notch)

<meta
  name="viewport"
  content="width=device-width, initial-scale=1.0, viewport-fit=cover"
/>
<meta
  name="viewport"
  content="width=device-width, initial-scale=1.0, viewport-fit=cover"
/>

Next.js notes

Icon loading

When using Next.js, Font Awesome icons might render before the CSS is loaded, which can cause issues like styles overriding bifrost, and icons jump in size on load. You can fix this by adding the following lines to your _app.tsx.

// The following import prevents a Font Awesome icon server-side rendering bug,
// where the icons flash from a very large icon down to a properly sized one:
import "@fortawesome/fontawesome-svg-core/styles.css";
// Prevent fontawesome from adding its CSS since we did it manually above:
import { config } from "@fortawesome/fontawesome-svg-core";
config.autoAddCss = false; /* eslint-disable import/first */
// The following import prevents a Font Awesome icon server-side rendering bug,
// where the icons flash from a very large icon down to a properly sized one:
import "@fortawesome/fontawesome-svg-core/styles.css";
// Prevent fontawesome from adding its CSS since we did it manually above:
import { config } from "@fortawesome/fontawesome-svg-core";
config.autoAddCss = false; /* eslint-disable import/first */

viewport-fit=cover

Instead of using the <meta>tag mentioned above, you can set the viewport-fit=cover via an exported viewport object from your root layout.tsx file:

import type { Viewport } from "next";

export const viewport: Viewport = {
  viewportFit: "cover",
};
import type { Viewport } from "next";

export const viewport: Viewport = {
  viewportFit: "cover",
};

Node.js and npm is required