Get started

Honeycomb-react

Honeycomb-react is a collection of reusable React components and resources to build awesome "flix-styled" products. It's based on Honeycomb core UI kit and shares same style base, head over to Honeycomb (HTML) section of our styleguide if you need more design related documentation and guidelines.

Usage

Using components in your project

First ensure you have either Gitlab or jFrog private npm package registries configured for your npm client. Refer to Honeycomb documentation for more details on how to do that.

After configuration is done you can install the package via npm:

npm i -S @flixbus/honeycomb-react

Second, make sure including the Roboto font into you project. We recommend 2 options:

Use our CDN link:

<link rel="preconnect" href="//honeycomb.flixbus.com/"/>
<link rel="preload" as="style" href="//honeycomb.flixbus.com/dist/16.6.3/css/honeycomb-fonts.css" crossorigin="" />
<link href="//honeycomb.flixbus.com/dist/16.6.3/css/honeycomb-fonts.css" rel="stylesheet" type="text/css" crossorigin="" />
<link rel="preconnect" href="//honeycomb.flixbus.com/"/>
<link rel="preload" as="style" href="//honeycomb.flixbus.com/dist/16.6.3/css/honeycomb-fonts.css" crossorigin="" />
<link href="//honeycomb.flixbus.com/dist/16.6.3/css/honeycomb-fonts.css" rel="stylesheet" type="text/css" crossorigin="" />

Use @fontsource/roboto package.

This option is beneficial if you want to have a fine grain control over the assets you load. In Honeycomb we use font weights 400, 500 and 700; so you can import just these when using it e.g.:

import "@fontsource/roboto/400.css";
import "@fontsource/roboto/500.css";
import "@fontsource/roboto/700.css";

And finally, make sure your App contents are wrapped with our <ThemeWrapper> component. It is required for themes and styles to work, please refer to its documentation to find out more.

Now you can access our tree shakable components as follows:

import { Button } from '@flixbus/honeycomb-react';
import { Button } from '@flixbus/honeycomb-react';

All the component specific css is self-contained and will be injected in the document head by the respective component.

Server side rendering

In order to provide styles from server side rendered markup you can make use of the InjecssProvider context. There are 2 options that are possible with this, depending on you setup: - context.styles has all the styles combined and concatenated as a single string; - context.styleNodes has an array of individual style nodes you can add to your <head> element.

We advise using style nodes as this prevents style duplication during runtime (honeycomb-react detects that nodes are already there and does nothing). To prevent specificity issues make sure to inject these styles before your application custom styles.

Here is an example:

const { InjecssContext } = require('@flixbus/honeycomb-react');
const HoneycombSsr = {}
ReactDOMServer.renderToString(
  <InjecssContext.Provider value={HoneycombSsr}>
    <YourAmazingApp />
  </InjecssContext.Provider>
);
// HoneycombSsr.styles will contain a single string with all required styles
// HoneycombSsr.styleNodes will contain an array of "<style>" nodes for all the HC-react components included on the page
const { InjecssContext } = require('@flixbus/honeycomb-react');
const HoneycombSsr = {}
ReactDOMServer.renderToString(
  <InjecssContext.Provider value={HoneycombSsr}>
    <YourAmazingApp />
  </InjecssContext.Provider>
);
// HoneycombSsr.styles will contain a single string with all required styles
// HoneycombSsr.styleNodes will contain an array of "<style>" nodes for all the HC-react components included on the page

Production builds

Honeycomb react offers production build for any variant without proptype validation. This will allow you to spare quite some bytes.

To enable it, add the following to your production webpack build (assuming you want esm modules):

{
  resolve: {
    alias: {
      '@flixbus/honeycomb-react': '@flixbus/honeycomb-react/dist/prod/esm/lib.js'
    }
  }
}

Included SASS/CSS files

We provide some useful tools from Honeycomb static for your beloved styling needs.

Theme variables

ThemeWrapper component takes care of injecting theme specific CSS variables to your page.

By default, it only adds them for the "default" theme, if you need your app to support more themes you'll need to pass a theme object with those themes to ThemeWrapper via themes prop. Please check ThemeWrapper component docs for more information on that specific topic.

No matter how many themes you utilize, all the theme variables are available for styling of your custom components.

You'll need to take care of proper prefixing of variables, in honeycomb-react all the theme design tokens have an --hcr- prefix.

So you need to use them like so:

.my-awesome-component {
  padding: 0 var(--hcr-spacing-2);
  background: var(--hcr-ui-primary-color);
}

Or you can use our cssvar SASS mixin that takes care of prefixing:

@use '@flixbus/honeycomb-react/dist/scss/honeycomb-tools' as hcTools;

.my-awesome-component {
  padding: 0 hcTools.cssvar(spacing-2);
  background: hcTools.cssvar(ui-primary-color);
}

More info regarding themes and available variables is provided in design token and themes documentation.

Helper classes

If you liked those helper classes from Honeycomb static and willing to use them in your project we have you covered just import:

// if you rely on SASS loader in your project use:
import '@flixbus/honeycomb-react/dist/scss/honeycomb-helpers.scss';
// otherwise use prebuilt CSS version
import '@flixbus/honeycomb-react/dist/css/honeycomb-helpers.css';
// if you rely on SASS loader in your project use:
import '@flixbus/honeycomb-react/dist/scss/honeycomb-helpers.scss';
// otherwise use prebuilt CSS version
import '@flixbus/honeycomb-react/dist/css/honeycomb-helpers.css';

Alternatively you can also use a set of handy helper hooks for alignment, spacing, accessibility and many other things.