README.md

👟 rbx – The Comprehensive Bulma UI Framework for React

rbx is a comprehensive library of React components for Bulma 0.7.2.

🔥 Read the docs.

🙃 I'll wait, go check them out!

To Install

npm install rbx or yarn add rbx

To Use

import "rbx/index.css";
import React from "react";
import { Columns } from "rbx";

export const MyPage = () => (
  <Columns>
    <Columns.Column>First Column</Columns.Column>
    <Columns.Column>Second Column</Columns.Column>
    <Columns.Column>Third Column</Columns.Column>
    <Columns.Column>Fourth Column</Columns.Column>
  </Columns>
);

To customize Bulma (including colors), follow the instructions below.

Library

All components support ref-forwarding, and are able to render as any other React Component Type you want to provide, by using the special prop as. For example, to render a Button component as a react-router Link:

import { Button } from "rbx";
import { Link } from "react-router-dom";

export const goHomeLink = (
  <Button as={Link} to="/home" color="primary" text>
    Go home
  </Button>
);

Customize Bulma

To override the variables set by Bulma, install Bulma (npm install [email protected]), and follow the Bulma instructions.

You will also need to import rbx/rbx.sass as it contains any pertinent bug fixes for Bulma.

A minimal example of App.sass might look like:

$primary: #61dafb

@import "~bulma/bulma.sass"
@import "../src/index.sass"

Then, import this file somewhere in your project.

Create React App

Create React App 2 supports SASS compilation out of the box.

To get started, please follow the official instructions to enable this feature.

Then, create a SASS file in your project (as described above):

Finally, import this stylesheet somewhere in your CRA app.

import "./App.sass";

Prior Art

This package was forked from react-bulma-components, and re-written in its entirety to support the latest version of Bulma, use TypeScript, and fix many outstanding bugs.