bulma-swatch-hook

Bulma swatches as a react hook and a component.

NOTE: Although you can use this package like a hook it does not actually rely on hooks. Only suspense is needed.

Installation

yarn add bulma-swatch-hook

Usage

You can either load the bulma swatches by directly using the hook or use the BulmaApp component.

Hook

Arguments:

• swatch: any bulma swatch or 'random'. If nothing is provided default swatch used.

import React from 'react';
import { useBulmaSwatch } from 'bulma-swatch-hook';

const MyApp = () => {
  useBulmaSwatch('nuclear');

  return (
    <article className="message is-link">
      <div className="message-header">
        <p>Link</p>
        <button className="delete" aria-label="delete" />
      </div>
    </article>
  );
};

const App = () => (
  <div className="App">
    <React.Suspense maxDuration={300} fallback={'loading...'}>
      <MyApp />
    </React.Suspense>
  </div>
);

export default App;

Component

Props:

• random: boolean - use a random swatch
• swatch: any bulma swatch. If nothing is provided and not random default swatch used.

import React from 'react';
import { BulmaApp } from 'bulma-swatch-hook';

const MyApp = () => (
  <BulmaApp>
    <article className="message is-link">
      <div className="message-header">
        <p>Link</p>
        <button className="delete" aria-label="delete" />
      </div>
    </article>
  </BulmaApp>
);

const App = () => (
  <div className="App">
    <React.Suspense maxDuration={300} fallback={'loading...'}>
      <MyApp />
    </React.Suspense>
  </div>
);

export default App;

Supported Swatches

• default
• cerulean
• cosmo
• cyborg
• darkly
• flatly
• journal
• litera
• lumen
• lux
• materia
• minty
• nuclear
• pulse
• random
• sandstone
• simplex
• slate
• solar
• spacelab
• superhero
• united
• yeti