A set of React components for Bulma CSS Framework

By Carlos Pérez Gutiérrez
Last update: Dec 22, 2022
Comments: 17

Bloomer

==================================

A cool set of React Stateless components for Bulma

Install

Bulma should be included in your project.

Using NPM

$ npm install bloomer --save

Using Yarn

$ yarn add bloomer

Using CDN

<html>
  <head>
    ...
  </head>
  <body>
    Other libraries
    <script type="text/javascript" src="https://unpkg.com/bloomer/bundles/bloomer.min.js">
    Cutom code
  </body>
</html>

Usage

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { Container, Box  } from 'bloomer';

ReactDOM.render(
  <Container>
    <Box>Hello World!</Box>
  </Container>,
  document.getElementById('root')
);

Documentation

The online documentation resides in bloomer page, you can find all the different topics related to this library.

Sections

Buy me a beer

Contributions

All contributions are welcome send your PR and Issues.

License

This is a open-source software licensed under the MIT license

Github

https://github.com/AlgusDark/bloomer/

Comments(17)

1

React 16 - Not working

Hi Team, can we have this library for React 16. I see it is using React.createElement and both React.createElement and React.PropTypes has been deprecated.
2

no way to use Tab & TabLink with NavLink from 'react-router'
```
<Tab isActive>
  <TabLink>Name</TabLink>
</Tab>
```
will generate:
```
<li class="is-active">
  <a>Name</a>
</li>
```
But, NavLink from react-router can only add className to itself, if it's active.
```
<NavLink to="/path" activeClassName="is-active" >Title</NavLink>
```
if we're in /path url, it will generate:
```
<a href="/path" class="is-active">Title</a>
```
So, even if we compose NavLink & TabLink, there's still no way to use bulma's style with it. Because, we can't add className to Tab when NavLink is active.
3

CSS not loaded
The CSS is not loaded when using bloomer with next.js. Take a look at this example:

componentes/hero.js
```
import { ... , Hero, ... } from 'bloomer'
export default () => (
  <Hero isSize='medium'>
  ...
)
```
layouts/body.js
```
import Head from '../components/head'
import Header from '../components/header'
import Footer from '../components/footer'

export default ({ children }) =>
  <div>
    <Head/>
    <Header/>
    { children }
    <Footer/>
  </div>
```
pages/index.js
```
import Body from '../layouts/body'
import Hero from '../components/hero'
export default () =>
  <Body>
    <Hero/>
  </Body>
```
There are no errors in the dev console. The css from