React.js components for Modern CSS framework based on Flexbox

  • By Anton Kulakov
  • Last update: Dec 7, 2022
  • Comments: 13


React.js components for Modern CSS framework based on Flexbox

2017-06-01 2 52 24

2017-06-01 2 52 24

JavaScript Style Guide


npm install reactbulma


import React from 'react'
import { Button } from 'reactbulma'

const App => () =>
      <Button primary>Primary</Button>
      <Button info>Info</Button>
      <Button success>Success</Button>
      <Button warning>Warning</Button>
      <Button danger>Danger</Button>

export default App

2017-10-10 22 16 02



  • 1

    Consider to use classnames package for create a class

    currently you are creating classes with if statements. I think it would be much easier to use module. I'm happy to help with it.

  • 2

    SubTitle file name mismatch (v3.0)

    This is about Bulma.


    Not browser bug

    Overview of the problem

    I'm using Bulma version [3.0.0] Chrome


    Failed to compile. ./node_modules/reactbulma/lib/components/index.js Module not found: ****/packages/client/node_modules/reactbulma/lib/components/Title/Subtitle.js does not match the corresponding path on disk SubTitle.js.

    Steps to Reproduce

    1. create-react-app
    2. yarn add reactbulma
    3. import { SubTitle } from 'reactbulma'

    Expected behavior

    Successful compilation

    Actual behavior

    Failed to compile.
    Module not found: `****/packages/client/node_modules/reactbulma/lib/components/Title/Subtitle.js` does not match the corresponding path on disk `SubTitle.js`.

    please note this issue is not occuring in v1.1.1

  • 3

    Why this approach ?

    Hi, First of all, thank you for the great work, it's very nice what you've done !

    This is not an issue, but just a general wonder that you may be able to answer: Why did you choose to implements your components with booleans values, instead of enums.

    For example, for the Icon component, you have to manually set the size like so

    <Icon small>
      <i class="icon"></i>

    Why not do the following:

    const size = 'small'
    <Icon size={size}>
      <i class="icon"></i>

    where the size props is an enumerable value, with the following possibilities: small, medium, large. And, you have the possibility to dynamically inject the size variable from a wrapper component or an external config. Or is there something that I'm missing with React, and you actually can work with a variable ?

    I was just wondering why you choose this approach over another one ? Best regards.

  • 4

    Typescript definition file for prop types

    Fixes #32. In this PR I created a Typescript definition file, changed the scripts to take it into account, and fixed a few ESLint problems.

    Would love to have feedback on this. I used the PropTypes to infer the TS types. If the PropTypes are not up to date or are wrong, the TS types will be wrong too.

    By the way, I think it would be awesome to convert the project to Typescript, so that the definition file is generated automatically, and so that the PropTypes are actually properly checked at compile time, assuring a better quality code. Would love to hear your opinion on this @kulakowka.

  • 5

    Bug fix: fixed subtitle import in index.js



    About the PR

    The goal of this is PR is to fix SubTitle component import in index.js. After this commit that renamed Subtitle to SubTitle but didn't changed the import line.

    Impact points

    This PR will correct this error when trying to import reactbulma's components: screen shot 2018-04-17 at 11 37 27 pm


    • [x] Change import line
    • [x] Bump package path

    Note to the core devs

    Please merge this PR and publish 3.0.1 version so we can use the latest version of reactbulma.

  • 6

    Ratio modifiers support for images

    I did a github search in the repo for sizes such as 4by5, 3by4 and 2by3 where the width > length but couldn't find anything in the code base. However these sizes are supported by bulma css out of the box. How would one go about using these sizes?

  • 7

    Document has typo

    Thank you for Good component! I notice this document has typo so I open this issue.

    Component of "SubTitle" has been exported as "SubTitle". However, the document is written as "Subtitle" as below.

    import { Subtitle } from 'reactbulma'

    "t" in Title must be in uppercase letters.

  • 8

    No license file

    Currently there is no license file in the repo, meaning that the work is by default under exclusive copyright. [source]

    You can use the GitHub created to help you pick an appropriate license.

    Otherwise, if you purposefully left out a license, please add a note to the README saying so.

  • 9

    Bugfix/deprecate language doc

    fix Warning: "example" code block language is deprecated. Use "js", "jsx" or "javascript" instead:

    and commit the yarn.lock with new update from 0.0.4

  • 10

    Support TypeScript?


    What about supporting TypeScript? When I try to use, I see this:

     Try `npm install @types/reactbulma` if it exists or add a new declaration (.d.ts) file containing `declare module 'reactbulma';`

    And, of cause, npm install @types/reactbulma do nothing. Would be great to start supporting TS at middle of 2018 for your awesome package..

  • 11

    add nocss option

    This pull request addresses #13 in a non-breaking way. You could use it like this:

    import { Hero } from 'reactbulma/lib/components/nocss'
    import './styles.scss'
    class BlogIndex extends React.Component {
      render() {
        return (
              Hello World

    And styles.scss:

    @import 'variables'; // custom variable overrides
    @import '~bulma/bulma.sass';
  • 12

    Suggested approach for focussing inputs after render

    Is there a suggested approach for focussing input fields when a component is rendered? The autoFocus parameter works on a page refresh, but not when replacing the current contents.

    The following approach does not work as the ref is associated with the Input class instance as opposed to the rendered input tag, and the focus() call is not forwarded:

    componentDidMount() {
    render() {
      return (
            <Input ref={ (input) => { this.inputField = input } } name="foo" /> 

    I'm quite new to React, so maybe I'm missing something.


  • 13

    ERROR in ./node_modules/bulma/css/bulma.css

    `ERROR in ./node_modules/bulma/css/bulma.css Module parse failed: Unexpected character '@' (2:0)

    You may need an appropriate loader to handle this file type. | /*! v0.6.1 | MIT License | */ | @-webkit-keyframes spinAround { | from { | -webkit-transform: rotate(0deg); @ ./app/main.jsx 24:0-30 @ multi ./app/main webpack-hot-middleware/client`

    I don't know if the problem comes from Webpack or Bulma...