hipstersmoothie / bulma-swatch-hook

Use different bulma swatches easily in you react app

Home Page:https://hipstersmoothie.com/bulma-swatch-hook/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

bulma-swatch-hook

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:

  • 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

About

Use different bulma swatches easily in you react app

https://hipstersmoothie.com/bulma-swatch-hook/

License:MIT License


Languages

Language:JavaScript 86.2%Language:CSS 12.4%Language:HTML 1.4%