BootswatchSelect

Description

A drop-in Bootswatch theme selector.

Supports three modes:

• Selector visible: A select element is rendered that allows the user to choose a theme to use. Dynamically swaps CSS out of head based on selection.
• Selector hidden: Provide a selectedThemeName prop along with selectorHidden and the provided theme will be used on the page. Adds CSS to head only. It doesn't matter where on the page this component is placed since no select is rendered.
• Display-only: Provide the disableHeadLink prop to disable the CSS link in head. Turns this into a plain old select. Use onChange to listen for selection.

By default, the themes load from bootstrapcdn.com. See the Props section below for additional options.

Bootstrap must be loaded first. You can use the included Bootstrap component to easily load from the CDN if you'd like.

Usage

Selector Visible

import { BootswatchSelect } from 'react-bootswatch-select';
...
<BootswatchSelect version={'4.4.1'} className="form-control" />

This renders a select containing theme name options for the Bootswatch version specified.

Here it is shown expanded below:

Selector Hidden

import { BootswatchSelect } from 'react-bootswatch-select';
...
<BootswatchSelect version={'4.4.1'} selectedThemeName="cerulean" selectorHidden />

The above code will use the cerulean theme (see Theme Names below for all options).

No visible element will be rendered when selectorHidden is used. As such, this can be placed anywhere.

Display-Only

import { BootswatchSelect } from 'react-bootswatch-select';
...
<BootswatchSelect version={'4.4.1'} disableHeadLink />

This will render the select only and will not dynamically add the selected theme CSS link in the head.

Props

In addition, all React HTML props for the select tag are supported (such as onChange, className, etc).

Theme Names

The theme name options are as follows:

• default — Basic Bootstrap
• cerulean — A calm blue sky
• cosmo — An ode to Metro
• cyborg — Jet black and electric blue
• darkly — Flatly in night mode
• flatly — Flat and modern
• journal — Crisp like a new sheet of paper
• litera — The medium is the message
• lumen — Light and shadow
• lux — A touch of class
• materia — Material is the metaphor
• minty — A fresh feel
• pulse — A trace of purple
• sandstone — A touch of warmth
• simplex — Mini and minimalist
• sketchy — A hand-drawn look for mockups and mirth
• slate — Shades of gunmetal gray
• solar — A spin on Solarized
• spacelab — Silvery and sleek
• superhero — The brave and the blue
• united — Ubuntu orange and unique font
• yeti — A friendly foundation

You can specify an initial theme using the selectedThemeName prop, and can handle selection changes using select's onChange event.

A BootswatchSelect renders as a select element when visible.

Examples

See the Storybook demo for a live example.

Selector Visible

<BootswatchSelect version={"4.4.1"} className="form-control" />

This select will dynamically add the theme CSS link in the head when a Bootswatch style is selected.

Selector Hidden

<BootswatchSelect
  version={"4.4.1"}
  selectedThemeName="cerulean"
  selectorHidden
/>

This will add the Bootswatch CSS theme selected in the head and not render the select on the page.

Display-Only (No Head Link)

<BootswatchSelect className="form-control" disableHeadLink />

This will render the select only and will not dynamically add the selected theme CSS link in the head. It just becomes a plain old select. Use onChange to listen for selection changes.