bulma-swatch-hook
Bulma swatches as a react component or a hook.
Last updated a year ago by alisowski .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install bulma-swatch-hook 
SYNC missed versions from official npm registry.

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

Current Tags

  • 0.1.15                                ...           latest (a year ago)

11 Versions

  • 0.1.15                                ...           a year ago
  • 0.1.14                                ...           a year ago
  • 0.1.13                                ...           a year ago
  • 0.1.12                                ...           a year ago
  • 0.1.11                                ...           a year ago
  • 0.1.10                                ...           a year ago
  • 0.1.9                                ...           a year ago
  • 0.1.8                                ...           a year ago
  • 0.1.7                                ...           a year ago
  • 0.1.6                                ...           a year ago
  • 0.1.5                                ...           a year ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 11
Dependencies (1)
Dev Dependencies (29)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |