React-bulma-components

React components for Bulma (v0.7.1) UI compatible with most used React Frameworks (Gatsby, CRA, Next.js)

V3

Currently V3 is in beta. You can try it with npm install react-bulma-components@next.
There may be some bugs in this version please be sure to test it before using it on your project

V2 Documentation

If you are using v2 please see the Readme on Here

BREAKING CHANGES V2 -> V3:

Now the alias needed to override Bulma variables (and/or use the directly the sass files) is _variables.sass instead of ~_variables.sass, See Advanced setup below.
Please check if the components you are using still works as expected, We add Ref forwarding https://reactjs.org/docs/forwarding-refs.html#forwarding-refs-to-dom-components

To Install

npm install react-bulma-components or yarn add -E react-bulma-components

To Use

Currently there are two ways to use this library depending of your needs and configuration:

Basic: You import from the main module the components and include the css yourself (No treeshaking by default, no bulma variables override)
Advanced: You import from the lib folder the components you need, this is the more versatile way but need some extra configuration (See Advanced Setup section)

Basic

This configuration will allow you to start fast but with one drawback, by default will include all components (no treeshaking) and will use the default variables of Bulma.

import React from 'react';
import 'react-bulma-components/dist/react-bulma-components.min.css';
import { Button } from 'react-bulma-components';

export default () => (
  <Button color="primary">My Bulma button</Button>
)

Advanced

This configuration is recomended if you answer yes to one of the following questions:

I'm worried about the final size of my bundle?
I need to override the default Bulma variables?

In your main scss/sass file you will need to include the generic css classes bulma use, please ensure you do this on your main scss file (App.scss fox example) and do not add this inside the _variables file (see below)

@import "~react-bulma-components/src/index.sass"

// Other styles

You can start using the library like this

import React from 'react';
import Button from 'react-bulma-components/lib/components/button';

export default () => (
  <Button color="primary">My Bulma button</Button>
)

Before you use this configuration you need to setup a _variables.sass file somewhere in your project (I recommend inside your src folder). This file will allow you to override bulma variables if need it like:

$primary: #c3c3c3

Note Use this file only for variables, do not include any css rule in it because that rule will be duplicated every time you include a component from this library.

Depending of your project configuration you will need to setup your framework to use this file:

Raw Webpack

Configure your webpack to handle sass files.

Inside the resolve directive setup your webpack to use modules from the folder where you put the _variables.sass file

{
  // ...
  resolve: {
    modules: ['node_modules', 'src'],
    // ...
  }
}

CRA

Install node-sass to enable the sass compiles on your project.

After that update your scripts in the package.json to add the folder to your path

"scripts": {
  "start": "NODE_PATH=./src react-scripts start",
  "build": "NODE_PATH=./src react-scripts build",
  "test": "NODE_PATH=./src react-scripts test",
  ...
}

where ./src is the folder where you put your _variables.sass

Gatsby

Follow the instructions to enable Sass compiling in project, and configure the sass plugin to include the path where you put the _variables.sass file, for example:

plugins: [
    {
      resolve: `gatsby-plugin-sass`,
      options: {
        includePaths: ["./src"],
      },
    }
    ...
]

Next.js

Follow the instructions to enable sass in the project. You will also need to configure the transpiled modules plugin next-plugin-transpile-modules so install it npm i --save-dev next-plugin-transpile-modules.

Now on your next.config.js configure your sass to include the directory where you put your _variables.sass file and add react-bulma-components to the transpiled modules

const withSass = require('@zeit/next-sass')
const withTM = require('next-plugin-transpile-modules');

module.exports = withTM(withSass({
    transpileModules: ['react-bulma-components'],
    sassLoaderOptions: {
        includePaths: ["./src"]
    },
}))

Documentation

You can find the documentation in https://couds.github.io/react-bulma-components

Each component imports their own sass file. Thus, you can reduce your css total file size by only including the styles that you will use. To enable this, please configure your Webpack to handle sass files. You can use the webpack.config.js on the root folder of this repository.

Some components may vary the api/naming convention with the Bulma Docs. Please refer to each stories in the Storybook to see how each component could be used (you can find the source code of the story on the tab Story on the bottom panel

The following components were ported:

Component	Storybook	Bulma docs
Box	Storybook	Docs
Breadcrumb	Storybook	Docs
Button	Storybook	Docs
Card	Storybook	Docs
Column	Storybook	Docs
Container	Storybook	Docs
Content	Storybook	Docs
Dropdown	Storybook	Docs
Footer	Storybook	Docs
Form	Storybook	Docs
Heading	Title, Subtitle and heading on Bulma Storybook	Docs
Hero	Storybook	Docs
Icon	Storybook	Docs
Image	Storybook	Docs
Level	Storybook	Docs
Loader	Storybook	--
Media	Storybook	Docs
Message	Storybook	Docs
Menu	Storybook	Docs
Modal	Storybook	Docs
Navbar	Storybook	Docs
Notification	Storybook	Docs
Pagination	Storybook	Docs
Panel	Storybook	Docs
Progress	Storybook	Docs
Section	Storybook	Docs
Tabs	Storybook	Docs
Table	Storybook	Docs
Tag	Storybook	Docs
Tile	Storybook	Docs

moetezch/react-bulma-components