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.

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

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.

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.

State

Finalized

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:

Tasks

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

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?

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.

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.

fix Warning: "example" code block language is deprecated. Use "js", "jsx" or "javascript" instead: https://react-styleguidist.js.org/docs/documenting.html

and commit the yarn.lock with new update from 0.0.4

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

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 (
      <Hero>
        <Hero.Body>
          Hello World
        </Hero.Body>
      </Hero>
    )
  }
}

And styles.scss:

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

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.

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