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
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.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 diskSubTitle.js
.Steps to Reproduce
Expected behavior
Successful compilation
Actual behavior
please note this issue is not occuring in v1.1.1
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
boolean
s values, instead ofenum
s.For example, for the
Icon
component, you have to manually set the size like soWhy not do the following:
where the
size
props is an enumerable value, with the following possibilities:small
,medium
,large
. And, you have the possibility to dynamically inject thesize
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.
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 thePropTypes
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.
Bug fix: fixed subtitle import in index.js
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
Note to the core devs
Please merge this PR and publish 3.0.1 version so we can use the latest version of reactbulma.
Ratio modifiers support for images
I did a github search in the repo for sizes such as
4by5
,3by4
and2by3
where thewidth > 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?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.
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.
Bugfix/deprecate language doc
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
Support TypeScript?
Hello.
What about supporting TypeScript? When I try to use, I see this:
And, of cause,
npm install @types/reactbulma
do nothing. Would be great to start supporting TS at middle of 2018 for your awesome package..add nocss option
This pull request addresses #13 in a non-breaking way. You could use it like this:
And styles.scss:
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 renderedinput
tag, and thefocus()
call is not forwarded:I'm quite new to React, so maybe I'm missing something.
Thanks.
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...