kulakowka / react-bulma

React.js components for Modern CSS framework based on Flexbox

React-Bulma

React.js components for Modern CSS framework based on Flexbox

• Styleguide: https://kulakowka.github.io/react-bulma/
• Official Repo: https://github.com/jgthms/bulma
• Official Site: http://bulma.io
• NPM: http://npmjs.com/package/reactbulma

Installation

npm install reactbulma

Usage

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

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

export default App

react-bulma's Issues

Support TypeScript?

Hello.

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..

Footer

Hi - any reason the Layout Footer component is missing?

Nav elements broken

Nav element has been replaced with NavBar in Bulma CSS codebase.

https://bulma.io/documentation/components/navbar/

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 choosealicense.com to help you pick an appropriate license.

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

Document has typo

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

https://kulakowka.github.io/react-bulma/#subtitle

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.

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() {
  this.inputField.focus();
}

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

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

Thanks.

Add events for buttons, inputs, etc..

It would be nice to have onClick events and onChange event for the buttons, inputs etc..

Add Travis CI

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?

SASS variable overrides

First off, thanks for creating this project! I am beginning to use it and it has been very easy to integrate. I was wondering if you've thought about a way to implement overrides for any of the SASS variables in Bulma? What comes to mind is overriding what the primary color is or the default font-family.

I'd be happy to help with this, but I don't know what that implementation would look like.

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>
</Icon>

Why not do the following:

const size = 'small'

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

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.

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.
| /*! bulma.io v0.6.1 | MIT License | github.com/jgthms/bulma */
| @-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...

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 https://www.npmjs.com/package/classnames module. I'm happy to help with it.

Create a npm package

Please create a npm package.

SubTitle file name mismatch (v3.0)

This is about Bulma.

Bug

Not browser bug

Overview of the problem

I'm using Bulma version [3.0.0]
Chrome

Description

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.
./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`.

please note this issue is not occuring in v1.1.1

Columns?

Columns are missing?