React Bulma Components
React components for Bulma (v0.9.2) UI compatible with most used React Frameworks (Gatsby, CRA, Next.js)
To Install
npm install react-bulma-components
or yarn add -E react-bulma-components
Documentation
You can find the documentation in https://react-bulma.dev/en/storybook
Some components may vary the api/naming convention with the Bulma Docs. Please refer to each stories in the Storybook to see how each component could be used
To Use
import React from 'react';
import 'bulma/css/bulma.min.css';
import { Button } from 'react-bulma-components';
export default () => (
<Button color="primary">My Bulma button</Button>
)
Form elements are imported as part of the Form class.
import { Form } from 'react-bulma-components';
const { Input, Field, Control, Label } = Form;
SASS support
Since CSS logic is separated from this library, there is no special setup required with the library. Simply follow the instructions in the official documentation. You only need to make sure the CSS is properly imported for your website.
Starting from v4, tree shaking is supported, so only the code of the components you have imported will be bundled.
FAQ
Use Button to render a Link from React-Router
We allow custom render component on all our components, to do it you can use the renderAs
props like this
import React from 'react';
import { Button } from 'react-bulma-components';
import { Link } from 'react-router';
const CustomLink = ({ to }) => {
return (
<Button to={to} renderAs={Link}>
My react router link
</Button>
)
}
Adding ref to a component
We use a custom prop to pass down the ref to the next dom object. (instead to the instance of the component).
const TestComponent = () => {
const buttonRef = useRef(null);
return <Button domRef={buttonRef}>button</Button>
}
Why we do this instead of using React.forwardRef? The forwardRef wrap the component into another one, because this is a library for wrapping the Bulma Framework cause an overhead and a lot of noise on the component tab of the React Dev Tools.
v4.0
This is an issue tracking this library's upgrade to v4.0.
New features:
<List />
componentis-clickable
helperis-max-desktop
andis-max-widescreen
for Containerdisplay
prop without viewport modifiers. (5f1b1eb48e53ac87ac95ddcd53c3e7922323db98)is-size-7
(2162f3fb4d38f31a4c52446860c12fa098fd3161)is-sr-only
modifier (e9fc3d2854298988b1b8136619688a3a86fcc960)table-container
component (#274)hoverable
prop forTable
component (#273)rounded
prop forForm.Select
component (aed577435c2f6070d49e1d53102964232beb4a21)Form.Select
(d2afa6dcc4f2b3de383db7ac2ba4cc1120934bd4)name
prop ofForm.Radio
is no longer required. (b365663a0bdd8ff3bb2ecf6fae4722cb09c4335e)Breadcrumb
item
prop and replace it withBreadcrumb.Item
loading
Button prop in favor of a unifiedstate
prop that already exists.~ Button can have multiple state at once - thestate
prop will be removed because it can only take one state at a time. (0da86324c10f9182c9904149e0d1422ea1b38bf6) Reverting this, does not make sense to have focus, hover and/or hover at the same timeForm.Input
. (aff9690ef622413c93a92aeafca21ad72f659523)rounded
prop forForm.Input
(corresponds tois-rounded
) (af1c3a2a063db32eb6b0f973ca666ce0d2910b4b).centered
prop forInputFile
Form.Textarea
default rows of 4. (2153d5b20f1a763c12621096d50ff88e8caf2357)has-fixed-size
support forForm.Textarea
(2153d5b20f1a763c12621096d50ff88e8caf2357)Form.Textarea
(2153d5b20f1a763c12621096d50ff88e8caf2357) Reverting this, does not make sense to have focus, hover and/or hover at the same timeForm.InputFile
is now a controlled componentHeading
will now pick the appropriate header element based on the supplied size. For example,size={4}
tellsHeading
to renderh4
under the hood. Default size will now be 3~ Won't do, the user will select the appropiate element with renderAsrenderAs
for various components for consistency's sake. Except Table because with any other component will not workHousekeeping:
bulma
topeerDependency
(#258)cc @couds
edit: marked breaking changes.
Rewrite TypeScript definition
I open this here to discuss if I should remove the TS support. currently there are several issues related with the
.d.ts
file but I do not know ts (I use pure JS), so maybe removeing this can solve some issues. unless someone can help me with the TS support.So. Unless someone help me with TS I will probably remove the TS condiguration on the next major release.
Thanks!
Documentation
Using a library that generates documentations from markdown files will make writing documentation much easier and less tedious. Updating documentation will also be easier too. Right now, we are using a full-blown
create-react-app
project just to display a static docs page. It is way too overkill and inefficient imo. cc @coudsAllow the use of `ref` in the button component
I am trying to use the
Button
-component together with the Reach UI library'sAlertDialog
and it's causing some trouble because you can't useref
with theButton
-component. The React documentation suggests thatforwardRef
can be used to allow this, see: https://reactjs.org/docs/forwarding-refs.htmlPotentially, this would also avoid change the
Input
etc to class components at the same timereact-bulma-components
version in use is: 2.1.0Next 9 - File to import not found or unreadable: _variables.sass.
Hi! I've followed the advanced instructions to install the components for next.js but am still failing to correctly import the variable sass file. Its a next.js 9 app created with creat-next-app. On
yarn dev
I get the following stack trace:I've tried to follow all the similar issues in the repo but none have yet solved the problem, the only difference I can see is that I am using nextjs 9. I've setup a demo repo here https://github.com/RichAWarren/react-bulma-next-9
Thanks in advance!
How to use Button with Link from react-router-dom?
Hello @couds and team :)
It's not allow in documentation, but still huge important thing β how to use
Button
component fromreact-bulma-components
withLink
fromreact-router-dom
?For example:
And generated html code is:
I mean one
<a>
tag into another<a>
tag β it's strange and not valid. Okay, I can userenderAs
props forButton
to change tag to, for example,<span>
. But if I do that, I get this error message in Chrome console:How can I work via
react-router-dom
in right valid way? Please help ;)P.S. and one more question.. what component may help me to replace this CSS classes to components:
field is-grouped
and its options, likeis-pulled-right
(or center/left)?How to use it with React FontAwesome component?
Hello.
I have no idea what is the
rbc rbc-*
icons do you use into React Bulma component, for example, Dropdown component? But...Code is:
HTML is:
And output is:
How to solve this OR use FontAwesome instead strange
rbc-*
icons? Please help me.2.0.0 missing displayName from all components in the new build and defaultProps boolean noise
Hey
Just upgraded from 1.5.0 to 2.0.0 and noticed all snapshots are now very very different to what they were before.
eg minified name for Columns is
v
, Card isp
etc:this is probably because of webpack 4 optimisation minimise settings for prod where UglifyJS is just being called with defaults. https://webpack.js.org/configuration/optimization/#optimization-minimize
additionally, there seem to be a lot of new
defaultProps
across the board. eg Card:this is coming from https://github.com/couds/react-bulma-components/blob/master/src/modifiers/index.js#L16
there is NO need to add any default props of type
Boolean
with afalsy
value, simply omitting it has the same result in 99% of the cases w/o the noise.Reduce Noise of ForwardRef components
With the addition of the ForwardRef to all components now the React tree its quite difficult to follow with wuite a lot "ForwardRef Component"
Solution: Expose 2 components one with Ref and one without, so the developer can import the Component with Ref if necessary.
Added support for .buttons class
Doc for
.button
class: https://bulma.io/documentation/elements/button/#list-of-buttons.New component:
<Button.Group />
Props:
New/modified props for
<Button />
:renderAs
now supports<span>
{ isSelected: PropTypes.bool }
Closes issue: https://github.com/couds/react-bulma-components/issues/93
Filter DOM properties before rendering element
I have a lot of warnings and errors in my console due to bulma components passing through properties to DOM elements that are not DOM properties.
Using something like pick react known prop to filter the properties may be useful.
Bump json5 from 1.0.1 to 1.0.2
Bumps json5 from 1.0.1 to 1.0.2.
Release notes
Sourced from json5's releases.
Changelog
Sourced from json5's changelog.
... (truncated)
Commits
a62db1e
1.0.2e0c23fe
docs: update CHANGELOG for v1.0.262a6540
fix: add proto to objects and arraysDependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting
@dependabot rebase
.Dependabot commands and options
You can trigger Dependabot actions by commenting on this PR:
@dependabot rebase
will rebase this PR@dependabot recreate
will recreate this PR, overwriting any edits that have been made to it@dependabot merge
will merge this PR after your CI passes on it@dependabot squash and merge
will squash and merge this PR after your CI passes on it@dependabot cancel merge
will cancel a previously requested merge and block automerging@dependabot reopen
will reopen this PR if it is closed@dependabot close
will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually@dependabot ignore this major version
will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this minor version
will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this dependency
will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)@dependabot use these labels
will set the current labels as the default for future PRs for this repo and language@dependabot use these reviewers
will set the current reviewers as the default for future PRs for this repo and language@dependabot use these assignees
will set the current assignees as the default for future PRs for this repo and language@dependabot use this milestone
will set the current milestone as the default for future PRs for this repo and languageYou can disable automated security fix PRs for this repo from the Security Alerts page.
Bump express from 4.17.1 to 4.18.2
Bumps express from 4.17.1 to 4.18.2.
Release notes
Sourced from express's releases.
... (truncated)
Changelog
Sourced from express's changelog.
... (truncated)
Commits
8368dc1
4.18.261f4049
docs: replace Freenode with Libera Chatbb7907b
build: [email protected]f56ce73
build: [email protected]24b3dc5
deps: [email protected]689d175
deps: [email protected]340be0f
build: [email protected]33e8dc3
docs: use Node.js name style644f646
build: [email protected]ecd7572
build: [email protected]Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting
@dependabot rebase
.Dependabot commands and options
You can trigger Dependabot actions by commenting on this PR:
@dependabot rebase
will rebase this PR@dependabot recreate
will recreate this PR, overwriting any edits that have been made to it@dependabot merge
will merge this PR after your CI passes on it@dependabot squash and merge
will squash and merge this PR after your CI passes on it@dependabot cancel merge
will cancel a previously requested merge and block automerging@dependabot reopen
will reopen this PR if it is closed@dependabot close
will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually@dependabot ignore this major version
will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this minor version
will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this dependency
will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)@dependabot use these labels
will set the current labels as the default for future PRs for this repo and language@dependabot use these reviewers
will set the current reviewers as the default for future PRs for this repo and language@dependabot use these assignees
will set the current assignees as the default for future PRs for this repo and language@dependabot use this milestone
will set the current milestone as the default for future PRs for this repo and languageYou can disable automated security fix PRs for this repo from the Security Alerts page.
Bump qs from 6.5.2 to 6.5.3
Bumps qs from 6.5.2 to 6.5.3.
Changelog
Sourced from qs's changelog.
Commits
298bfa5
v6.5.3ed0f5dc
[Fix]parse
: ignore__proto__
keys (#428)691e739
[Robustness]stringify
: avoid relying on a globalundefined
(#427)1072d57
[readme] remove travis badge; add github actions/codecov badges; update URLs12ac1c4
[meta] fix README.md (#399)0338716
[actions] backport actions from main5639c20
Clean up license text so itβs properly detected as BSD-3-Clause51b8a0b
add FUNDING.yml45f6759
[Fix] fix for an impossible situation: when the formatter is called with a no...f814a7f
[Dev Deps] backport from mainDependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting
@dependabot rebase
.Dependabot commands and options
You can trigger Dependabot actions by commenting on this PR:
@dependabot rebase
will rebase this PR@dependabot recreate
will recreate this PR, overwriting any edits that have been made to it@dependabot merge
will merge this PR after your CI passes on it@dependabot squash and merge
will squash and merge this PR after your CI passes on it@dependabot cancel merge
will cancel a previously requested merge and block automerging@dependabot reopen
will reopen this PR if it is closed@dependabot close
will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually@dependabot ignore this major version
will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this minor version
will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this dependency
will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)@dependabot use these labels
will set the current labels as the default for future PRs for this repo and language@dependabot use these reviewers
will set the current reviewers as the default for future PRs for this repo and language@dependabot use these assignees
will set the current assignees as the default for future PRs for this repo and language@dependabot use this milestone
will set the current milestone as the default for future PRs for this repo and languageYou can disable automated security fix PRs for this repo from the Security Alerts page.
Bump decode-uri-component from 0.2.0 to 0.2.2
Bumps decode-uri-component from 0.2.0 to 0.2.2.
Release notes
Sourced from decode-uri-component's releases.
Commits
a0eea46
0.2.2980e0bf
Prevent overwriting previously decoded tokens3c8a373
0.2.176abc93
Switch to GitHub workflows746ca5d
Fix issue where decode throws - fixes #6486d7e2
Update license (#1)a650457
Tidelift tasks66e1c28
Meta tweaksDependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting
@dependabot rebase
.Dependabot commands and options
You can trigger Dependabot actions by commenting on this PR:
@dependabot rebase
will rebase this PR@dependabot recreate
will recreate this PR, overwriting any edits that have been made to it@dependabot merge
will merge this PR after your CI passes on it@dependabot squash and merge
will squash and merge this PR after your CI passes on it@dependabot cancel merge
will cancel a previously requested merge and block automerging@dependabot reopen
will reopen this PR if it is closed@dependabot close
will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually@dependabot ignore this major version
will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this minor version
will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this dependency
will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)@dependabot use these labels
will set the current labels as the default for future PRs for this repo and language@dependabot use these reviewers
will set the current reviewers as the default for future PRs for this repo and language@dependabot use these assignees
will set the current assignees as the default for future PRs for this repo and language@dependabot use this milestone
will set the current milestone as the default for future PRs for this repo and languageYou can disable automated security fix PRs for this repo from the Security Alerts page.
Bump loader-utils from 1.4.0 to 1.4.2
Bumps loader-utils from 1.4.0 to 1.4.2.
Release notes
Sourced from loader-utils's releases.
Changelog
Sourced from loader-utils's changelog.
Commits
331ad50
chore(release): 1.4.217cbf8f
fix: ReDoS problem (#226)8f082b3
chore(release): 1.4.14504e34
fix: security problem (#220)Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting
@dependabot rebase
.Dependabot commands and options
You can trigger Dependabot actions by commenting on this PR:
@dependabot rebase
will rebase this PR@dependabot recreate
will recreate this PR, overwriting any edits that have been made to it@dependabot merge
will merge this PR after your CI passes on it@dependabot squash and merge
will squash and merge this PR after your CI passes on it@dependabot cancel merge
will cancel a previously requested merge and block automerging@dependabot reopen
will reopen this PR if it is closed@dependabot close
will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually@dependabot ignore this major version
will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this minor version
will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this dependency
will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)@dependabot use these labels
will set the current labels as the default for future PRs for this repo and language@dependabot use these reviewers
will set the current reviewers as the default for future PRs for this repo and language@dependabot use these assignees
will set the current assignees as the default for future PRs for this repo and language@dependabot use this milestone
will set the current milestone as the default for future PRs for this repo and languageYou can disable automated security fix PRs for this repo from the Security Alerts page.