Home

Awesome

<div align="center"> <img height="200" src="https://raw.githubusercontent.com/jgthms/bulma/master/docs/images/bulma-banner.png"> <h1>bulma-swatch-hook</h1> </div>

code style: prettier CircleCI npm npm

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:

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:

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