React components for Bulma framework

Overview

React-bulma-components

Build Status Coverage Status Release Version Npm Downloads

React components for Bulma (v0.8.2) UI compatible with most used React Frameworks (Gatsby, CRA, Next.js)

V4 Pool

Please Check https://github.com/couds/react-bulma-components/issues/258, we are thinking to change the bulma dependency to a peer dependency and remove the style importes from this library. you can vote here https://doodle.com/poll/mqqpxwkzm6nnrs3s

BREAKING CHANGES V2 -> V3:

  • Now the alias needed to override Bulma variables (and/or use the directly the sass files) is _variables.sass instead of ~_variables.sass, See Advanced setup below.
  • V3 Use the new Context api so requires react >= 16.3

To Install

npm install react-bulma-components or yarn add -E react-bulma-components

To Use

Currently there are two ways to use this library depending of your needs and configuration:

  • Basic: You import from the main module the components and include the css yourself (No treeshaking by default, no bulma variables override)
  • Advanced: You import from the lib folder the components you need, this is the more versatile way but need some extra configuration (See Advanced Setup section)

Basic

This configuration will allow you to start fast but with one drawback, by default will include all components (no treeshaking) and will use the default variables of Bulma.

import React from 'react';
import 'react-bulma-components/dist/react-bulma-components.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;

Advanced

This configuration is recomended if you answer yes to one of the following questions:

  • I'm worried about the final size of my bundle?
  • I need to override the default Bulma variables?

In your main scss/sass file you will need to include the generic css classes bulma use, please ensure you do this on your main scss file (App.scss fox example) and do not add this inside the _variables file (see below)

@import "~react-bulma-components/src/index.sass"

// Other styles

You can start using the library like this

import React from 'react';
import Button from 'react-bulma-components/lib/components/button';

export default () => (
  <Button color="primary">My Bulma button</Button>
)

Before you use this configuration you need to setup a _variables.sass file somewhere in your project (I recommend inside your src folder). This file will allow you to override bulma variables if need it like:

$primary: #c3c3c3

Note Use this file only for variables, do not include any css rule in it because that rule will be duplicated every time you include a component from this library.

Depending of your project configuration you will need to setup your framework to use this file:

Raw Webpack

Configure your webpack to handle sass files.

Inside the resolve directive setup your webpack to use modules from the folder where you put the _variables.sass file

{
  // ...
  resolve: {
    modules: ['node_modules', 'src'],
    // ...
  }
}

CRA

Install node-sass to enable the sass compiles on your project.

After that update your jsconfig.json to add the folder to your path

{
  "compilerOptions": {
    "baseUrl": "./src"
  }
}

where ./src is the folder where you put your _variables.sass

Gatsby

Follow the instructions to enable Sass compiling in project, and configure the sass plugin to include the path where you put the _variables.sass file, for example:

plugins: [
    {
      resolve: `gatsby-plugin-sass`,
      options: {
        includePaths: ["./src"],
      },
    }
    ...
]

Next.js

Follow the instructions to enable sass in the project. You will also need to configure the transpiled modules plugin next-transpile-modules so install it npm i --save-dev next-transpile-modules.

Now on your next.config.js configure your sass to include the directory where you put your _variables.sass file and add react-bulma-components to the transpiled modules. note withTM() should always be the most nested function in your config.

const withSass = require('@zeit/next-sass')
const withTM = require('next-transpile-modules')(['react-bulma-components']);

module.exports = withTM(withSass({
    // NOTE: this also allow to use abolute import from this folder not only for the _variables.sass file
    webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
        config.resolve.modules.push('./pages'); // Add to webpack configuration the folder where you put the _variables file
        return config
    },
}));

The last thing to remember is that since you're transpiling react-bulma-components from source, make sure your import statements reflect this in your app:

import React from 'react';
import Button from 'react-bulma-components/src/components/button'; //import from src, not lib

export default () => (
  <Button color="primary">My Bulma button</Button>
)

Documentation

You can find the documentation in https://couds.github.io/react-bulma-components

Each component imports their own sass file. Thus, you can reduce your css total file size by only including the styles that you will use. To enable this, please configure your Webpack to handle sass files. You can use the webpack.config.js on the root folder of this repository.

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 (you can find the source code of the story on the tab Story on the bottom panel

The following components were ported:

Component Storybook Bulma docs
Box Storybook Docs
Breadcrumb Storybook Docs
Button Storybook Docs
Card Storybook Docs
Column Storybook Docs
Container Storybook Docs
Content Storybook Docs
Dropdown Storybook Docs
Footer Storybook Docs
Form Storybook Docs
Heading Title, Subtitle and heading on Bulma Storybook Docs
Hero Storybook Docs
Icon Storybook Docs
Image Storybook Docs
Level Storybook Docs
List Storybook Docs
Loader Storybook --
Media Storybook Docs
Message Storybook Docs
Menu Storybook Docs
Modal Storybook Docs
Navbar Storybook Docs
Notification Storybook Docs
Pagination Storybook Docs
Panel Storybook Docs
Progress Storybook Docs
Section Storybook Docs
Tabs Storybook Docs
Table Storybook Docs
Tag Storybook Docs
Tile Storybook Docs

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.

Issues
  • v4.0

    v4.0

    This is an issue tracking this library's upgrade to v4.0.

    New features:

    • [x] Support for Bulma 0.9.1
      • [x] Spacing helpers
      • [x] Light/Dark color helpers
      • [x] Remove <List /> component
      • [x] is-clickable helper
      • [x] is-max-desktop and is-max-widescreen for Container
    • [x] Standalone display prop without viewport modifiers. (5f1b1eb48e53ac87ac95ddcd53c3e7922323db98)
    • [x] Support is-size-7 (2162f3fb4d38f31a4c52446860c12fa098fd3161)
    • [x] Support font family modifiers (d82cee85e89d391e6eae18ff703032684be30589)
    • [x] Support for is-sr-only modifier (e9fc3d2854298988b1b8136619688a3a86fcc960)
    • [x] Tree shaking
    • [x] Update Documentation for installation process (Now there will be only one no more advanced configuration need it)
    • [x] TypeScript support
    • [x] Add missing table-container component (#274)
    • [x] Add missing hoverable prop for Table component (#273)
    • [x] Add missing rounded prop for Form.Select component (aed577435c2f6070d49e1d53102964232beb4a21)
    • [x] Add various state props for Form.Select (d2afa6dcc4f2b3de383db7ac2ba4cc1120934bd4)
    • [x] BREAKING name prop of Form.Radio is no longer required. (b365663a0bdd8ff3bb2ecf6fae4722cb09c4335e)
    • [x] BREAKING Simplify responsive props (#279)
    • [x] BREAKING remove Breadcrumb item prop and replace it with Breadcrumb.Item
    • [x] Ability to show the first and last page in Pagination (#283)
    • [x] BREAKING ~Remove loading Button prop in favor of a unified state prop that already exists.~ Button can have multiple state at once - the state 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 time
    • [x] Add focus, hover ~and loading~ (UPDATE loading state is applied to Control instead of Input, removing) state props for Form.Input. (aff9690ef622413c93a92aeafca21ad72f659523)
    • [x] Add rounded prop for Form.Input (corresponds to is-rounded) (af1c3a2a063db32eb6b0f973ca666ce0d2910b4b).
    • [x] Add centered prop for InputFile
    • [x] BREAKING Remove Form.Textarea default rows of 4. (2153d5b20f1a763c12621096d50ff88e8caf2357)
    • [x] Add has-fixed-size support for Form.Textarea (2153d5b20f1a763c12621096d50ff88e8caf2357)
    • [x] Add various state props (loading, focused, etc.) for Form.Textarea (2153d5b20f1a763c12621096d50ff88e8caf2357) Reverting this, does not make sense to have focus, hover and/or hover at the same time
    • [x] BREAKING Form.InputFile is now a controlled component
    • [x] ~BREAKING Heading will now pick the appropriate header element based on the supplied size. For example, size={4} tells Heading to render h4 under the hood. Default size will now be 3~ Won't do, the user will select the appropiate element with renderAs
    • [x] Allow override of renderAs for various components for consistency's sake. Except Table because with any other component will not work

    Housekeeping:

    • [x] BREAKING Move bulma to peerDependency (#258)
    • [x] BREAKING Move Remove sass import from codebase
    • [x] Remove yarn.lock
    • [x] (Optional) Rewrite class components with hooks.
    • [x] (Optional) Review how we exports the components and see if there are no a better way
    • [x] Remove default HTML attributes/React props from propTypes object (for example style, disabled) unless it is accessed by the component.

    cc @couds

    edit: marked breaking changes.

    WIP Major change dependencies 
    opened by kennethnym 67
  • Rewrite TypeScript definition

    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!

    help wanted Typescript 
    opened by couds 23
  • Allow the use of `ref` in the button component

    Allow the use of `ref` in the button component

    I am trying to use the Button-component together with the Reach UI library's AlertDialog and it's causing some trouble because you can't use ref with the Button-component. The React documentation suggests that forwardRef can be used to allow this, see: https://reactjs.org/docs/forwarding-refs.html

    Potentially, this would also avoid change the Input etc to class components at the same time

    react-bulma-components version in use is: 2.1.0

    opened by weyert 21
  • Documentation

    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 @couds

    enhancement help wanted good first issue discussion 
    opened by kennethnym 21
  • Next 9 - File to import not found or unreadable: _variables.sass.

    Next 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:

    ModuleBuildError: Module build failed (from ./node_modules/@zeit/next-css/node_modules/mini-css-extract-plugin/dist/loader.js):
    ModuleBuildError: Module build failed (from ./node_modules/sass-loader/lib/loader.js):
    
    @import "_variables.sass"
    ^
          File to import not found or unreadable: _variables.sass.
          in /Users/richard/Documents/code/oddsjar/node_modules/react-bulma-components/src/components/utils.sass (line 3, column 1)
        at /Users/richard/Documents/code/oddsjar/node_modules/webpack/lib/NormalModule.js:316:20
        at /Users/richard/Documents/code/oddsjar/node_modules/loader-runner/lib/LoaderRunner.js:367:11
        at /Users/richard/Documents/code/oddsjar/node_modules/loader-runner/lib/LoaderRunner.js:233:18
        at context.callback (/Users/richard/Documents/code/oddsjar/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
        at Object.callback (/Users/richard/Documents/code/oddsjar/node_modules/sass-loader/lib/loader.js:55:13)
        at Object.<anonymous> (/Users/richard/Documents/code/oddsjar/node_modules/async/dist/async.js:2271:31)
        at Object.callback (/Users/richard/Documents/code/oddsjar/node_modules/async/dist/async.js:969:16)
        at options.error (/Users/richard/Documents/code/oddsjar/node_modules/node-sass/lib/index.js:294:32)
        at /Users/richard/Documents/code/oddsjar/node_modules/webpack/lib/NormalModule.js:316:20
        at /Users/richard/Documents/code/oddsjar/node_modules/loader-runner/lib/LoaderRunner.js:367:11
        at /Users/richard/Documents/code/oddsjar/node_modules/loader-runner/lib/LoaderRunner.js:182:20
        at context.callback (/Users/richard/Documents/code/oddsjar/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
        at /Users/richard/Documents/code/oddsjar/node_modules/@zeit/next-css/node_modules/mini-css-extract-plugin/dist/loader.js:112:14
        at /Users/richard/Documents/code/oddsjar/node_modules/webpack/lib/Compiler.js:343:11
        at /Users/richard/Documents/code/oddsjar/node_modules/webpack/lib/Compiler.js:681:15
        at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/richard/Documents/code/oddsjar/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:24:1)
        at AsyncSeriesHook.lazyCompileHook (/Users/richard/Documents/code/oddsjar/node_modules/tapable/lib/Hook.js:154:20)
        at /Users/richard/Documents/code/oddsjar/node_modules/webpack/lib/Compiler.js:678:31
        at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/richard/Documents/code/oddsjar/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
        at AsyncSeriesHook.lazyCompileHook (/Users/richard/Documents/code/oddsjar/node_modules/tapable/lib/Hook.js:154:20)
        at /Users/richard/Documents/code/oddsjar/node_modules/webpack/lib/Compilation.js:1423:35
        at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/richard/Documents/code/oddsjar/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
        at AsyncSeriesHook.lazyCompileHook (/Users/richard/Documents/code/oddsjar/node_modules/tapable/lib/Hook.js:154:20)
        at /Users/richard/Documents/code/oddsjar/node_modules/webpack/lib/Compilation.js:1414:32
    

    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!

    opened by RichAWarren 18
  • How to use Button with Link from react-router-dom?

    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 from react-bulma-components with Link from react-router-dom?

    For example:

    import React, { Component } from 'react';
    import { Link } from 'react-router-dom';
    
    import Columns from 'react-bulma-components/lib/components/columns';
    import Heading from 'react-bulma-components/lib/components/heading';
    import Button from 'react-bulma-components/lib/components/button';
    
    class Navigation extends Component {
      render () {
        return (
          <Columns className="has-vertical-centered is-mobile" multiline>
            <Columns.Column>
              <div className="field is-grouped is-pulled-right">
                <p className="control">
                  <Link to="/account">
                    <Button color="white" className="is-rounded">
                      <span>My Account</span>
                    </Button>
                  </Link>
                </p>
              </div>
            </Columns.Column>
          </Columns>
        );
      }
    }
    
    export default Navigation;
    

    And generated html code is:

    <div className="has-vertical-centered is-mobile columns is-multiline">
      <div className="column">
        <div className="field is-grouped is-pulled-right">
          <p className="control">
            <a href="/account">
              <a tabIndex="0" className="is-rounded is-white button">
                <span>My Account</span>
              </a>
            </a>
          </p>
      </div>
    </div>
    

    I mean one <a> tag into another <a> tag β€” it's strange and not valid. Okay, I can use renderAs props for Button to change tag to, for example, <span>. But if I do that, I get this error message in Chrome console:

    Warning: Failed prop type: Invalid prop `renderAs` supplied to `Button`.
        in Button (at Navigation.js:19)
        in Navigation (at LandingIndex.js:12)
        in div (at LandingIndex.js:11)
        in div (at LandingIndex.js:10)
        in div (at LandingIndex.js:9)
        in LandingIndex (created by Route)
        in Route (at index.js:18)
        in Switch (at index.js:17)
        in Router (created by BrowserRouter)
        in BrowserRouter (at index.js:16)
    

    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, like is-pulled-right (or center/left)?

    opened by koddr 18
  • Upgrade to v4.0

    Upgrade to v4.0

    This PR tracks the upgrade of this library to v4.0

    Closes #262

    WIP Major change dependencies 
    opened by kennethnym 17
  • How to use it with React FontAwesome component?

    How to use it with React FontAwesome component?

    Hello.

    Would be great to replace icons with React FontAwesome component.

    I have no idea what is the rbc rbc-* icons do you use into React Bulma component, for example, Dropdown component? But...

    Code is:

    import React, { Component } from 'react';
    
    import Hero from 'react-bulma-components/lib/components/hero';
    import Dropdown from 'react-bulma-components/lib/components/dropdown';
    
    class SliderHero extends Component {
      render () {
        return (
          <Hero size="fullheight" color="link">
            <Hero.Body>
              <Dropdown hoverable>
                <Dropdown.Item value="item">
                  Dropdown item
                </Dropdown.Item>
                <Dropdown.Item value="other">
                  Other Dropdown item
                </Dropdown.Item>
                <Dropdown.Item value="active">
                  Active Dropdown item
                </Dropdown.Item>
                <Dropdown.Item value="other 2">
                  Other Dropdown item
                </Dropdown.Item>
                <Dropdown.Divider/>
                <Dropdown.Item value="divider">
                  With divider
                </Dropdown.Item>
              </Dropdown>
            </Hero.Body>
          </Hero>
        );
      }
    }
    
    export default SliderHero;
    

    HTML is:

    <section className="hero is-link is-fullheight">
      <div className="hero-body">
        <div className="dropdown is-hoverable">
          <div className="dropdown-trigger" role="presentation">
            <a tabIndex="0" className="button">
              <span>Dropdown item</span>
              <span className="icon is-small"><i className="rbc rbc-angle-down"></i></span>
            </a>
          </div>
          <div className="dropdown-menu" id="dropdown-menu" role="menu">
            <div className="dropdown-content">
              <div title="item" role="presentation" className="dropdown-item">Dropdown item</div>
              <div title="other" role="presentation" className="dropdown-item">Other Dropdown item</div>
              <div title="active" role="presentation" className="dropdown-item">Active Dropdown item</div>
              <div title="other 2" role="presentation" className="dropdown-item">Other Dropdown item</div>
              <hr className="dropdown-divider">
              <div title="divider" role="presentation" className="dropdown-item">With divider</div>
            </div>
          </div>
        </div>
      </div>
    </section>
    

    And output is:

    screen shot 2018-06-16 at 20 03 05

    How to solve this OR use FontAwesome instead strange rbc-* icons? Please help me.

    opened by koddr 16
  • 2.0.0 missing displayName from all components in the new build and defaultProps boolean noise

    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 is p etc:

        -       <Columns
        +       <v
        +         backgroundColor={null}
    
        -       <Card
        +       <p
        +         backgroundColor={null}
    

    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:

        +         clearfix={false}
        +         clipped={false}
        +         hidden={false}
        +         invisible={false}
        +         italic={false}
        +         marginless={false}
        +         overlay={false}
        +         paddingless={false}
        +         radiusless={false}
    

    this is coming from https://github.com/couds/react-bulma-components/blob/master/src/modifiers/index.js#L16

     defaultProps: {
        clearfix: false,
        pull: undefined,
        marginless: false,
        paddingless: false,
        overlay: false,
        clipped: false,
        radiusless: false,
        shadowless: false,
        unselectable: false,
        invisible: false,
        hidden: false,
      },
    

    there is NO need to add any default props of type Boolean with a falsy value, simply omitting it has the same result in 99% of the cases w/o the noise.

    opened by DimitarChristoff 14
  • Added support for .buttons class

    Added support for .buttons class

    Doc for .button class: https://bulma.io/documentation/elements/button/#list-of-buttons.

    New component: <Button.Group />
    Props:

    {
      hasAddons: PropTypes.bool,
      position: PropTypes.oneOf([undefined, '', 'centered', 'right']),
      renderAs: PropTypes.oneOfType([
        PropTypes.string,
        PropTypes.func 
      ])
    }
    

    New/modified props for <Button />:

    • renderAs now supports <span>
    • { isSelected: PropTypes.bool }

    Closes issue: https://github.com/couds/react-bulma-components/issues/93

    opened by kennethnym 13
  • Same id is used in every dropdown-menu element

    Same id is used in every dropdown-menu element

    Describe the bug When using the dropdown menu it adds a generic id. If an id is needed this must be unique! <Dropdown className="status-dropdown active" closeOnSelect={true} label="Active" > <Dropdown.Item renderAs="a" value="item">

    To Reproduce Steps to reproduce the behavior:

    1. Go to '...'
    2. Click on '....'
    3. Scroll down to '....'
    4. See error

    Expected behavior A clear and concise description of what you expected to happen.

    Screenshots If applicable, add screenshots to help explain your problem.

    Versions

    • react-bulma-components::
    • bulma:
    • react:
    • Browser: (e.g. Firefox version 67)

    Additional context Add any other context about the problem here.

    bug 
    opened by smeknamn 0
  • Navbar-dropdown cant be a span element must be a div or other block element

    Navbar-dropdown cant be a span element must be a div or other block element

    Describe the bug Using a divider converted as a hr element, is not allowed in proper html to be inside a list item span element. When validate my code in W3C's validator it says: Element hr not allowed as child of element span in this context.

    The officiell Bulma uses div elements here, why have you change that to span?

    bug 
    opened by smeknamn 0
  • Navbar not rendering properly

    Navbar not rendering properly

    Describe the bug As pictured, the links that should be to the right of the Navbar Brand are off in wrong place Screenshot from 2021-09-28 13-20-11

    <Router>
    
              <Navbar>
                <Navbar.Brand>
                  <Navbar.Item href="#">
                    <img
                      alt="Bulma: a modern CSS framework based on Flexbox"
                      height="28"
                      src="https://bulma.io/images/bulma-logo.png"
                      width="112"
                    />
                  </Navbar.Item>
                  <Navbar.Burger />
                </Navbar.Brand>
                <Navbar.Menu>
                  <Navbar.Container>
                    <Navbar.Item href="#">
                      <Navbar.Link>
                        First
                      </Navbar.Link>
                      <Navbar.Dropdown>
                        <Navbar.Item href="#">
                          Subitem 1
                        </Navbar.Item>
                        <Navbar.Item href="#">
                          Subitem 2
                        </Navbar.Item>
                        <Navbar.Divider />
                        <Navbar.Item href="#">
                          After divider
                        </Navbar.Item>
                      </Navbar.Dropdown>
                    </Navbar.Item>
                    <Navbar.Item href="#">
                      Second
                    </Navbar.Item>
                  </Navbar.Container>
                  <Navbar.Container align="end">
                    <Navbar.Item href="#">
                      At the end
                    </Navbar.Item>
                  </Navbar.Container>
                </Navbar.Menu>
              </Navbar>
    
              <nav class="navbar" role="navigation" aria-label="main navigation">
                <div class="navbar-brand">
                  <a class="navbar-item" href="https://bulma.io">
                    <img src="https://bulma.io/images/bulma-logo.png" width="112" height="28" />
                  </a>
    
                  <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
                    <span aria-hidden="true"></span>
                    <span aria-hidden="true"></span>
                    <span aria-hidden="true"></span>
                  </a>
                </div>
    
                <div id="navbarBasicExample" class="navbar-menu">
                  <div class="navbar-start">
                    <a class="navbar-item">
                      Home
                    </a>
    
                    <a class="navbar-item">
                      Documentation
                    </a>
    
                    <div class="navbar-item has-dropdown is-hoverable">
                      <a class="navbar-link">
                        More
                      </a>
    
                      <div class="navbar-dropdown">
                        <a class="navbar-item">
                          About
                        </a>
                        <a class="navbar-item">
                          Jobs
                        </a>
                        <a class="navbar-item">
                          Contact
                        </a>
                        <hr class="navbar-divider" />
                        <a class="navbar-item">
                          Report an issue
                        </a>
                      </div>
                    </div>
                  </div>
    
                  <div class="navbar-end">
                    <div class="navbar-item">
                      <div class="buttons">
                        <a class="button is-primary">
                          <strong>Sign up</strong>
                        </a>
                        <a class="button is-light">
                          Log in
                        </a>
                      </div>
                    </div>
                  </div>
                </div>
              </nav>
              <Switch>
                <Route exact path="/">
                  <Home />
                </Route>
                <Route exact path="/about">
                  <About />
                </Route>
              </Switch>
    
            </Router>
    
    bug 
    opened by kennedybaird 1
  • [WIP] [BREAKING] Exporting existing components props to allow extension

    [WIP] [BREAKING] Exporting existing components props to allow extension

    Hi there, I am wondering if there is a way to create a new custom component (e.g. MyCustomTabs) based on react-bulma-components Tabs component by also adding a new type to the already existing ones type?: 'toggle' | 'boxed' | 'toggle-rounded' | 'MYCUSTOMTYPE'?

    I see that the interface coming with Tabs from 'react-bulma-components'

    interface TabsProps {
      align?: 'center' | 'right';
      size?: Size;
      type?: 'toggle' | 'boxed' | 'toggle-rounded';
      fullwidth?: boolean;
    }
    

    is not exported so I cannot import it and extend it with additional types where I need it.The dummy example I provide will end up with TS throwing an error that <Tabs> Type 'MYCUSTOTYPE' is not assignable to type '"toggle" | "boxed" | "toggle-rounded" | undefined'.

      export interface MyCustomTabsProps {
      className?: string
      renderAs?: string
      align?: 'center' | 'right'
      size?: 'small' | 'medium' | 'large' | string
      type?: 'toggle' | 'boxed' | 'toggle-rounded' | 'MYCUSTOMTYPE'
      fullwidth?: boolean
    }
    
      export const MyCustomTabs: React.FC<MyCustomTabsProps> = ({
      className, 
      renderAs,
      ...props
      }): JSX.Element => {
        return (
          <Tabs  className={className} {...props}>
            <Tabs.Tab renderAs={renderAs || 'span'}>
               Tab content
             </Tabs.Tab>
          </Tabs>
         )
      }
    

    If you can provide any advice if what I am trying to do is feasible at all or any way to solve the issue, I will be thankful. I was also wondering if there is any particular reason for not exporting the interfaces of the of the elements/components from bulma-react-components, since this might be of use in cases like that?

    Last but not least, thank you for the amazing work you're all doing with react-bulma-components All the best,

    WIP Feature Request 
    opened by petertodorov 5
  • [HELP]: Multilevel menus in Navbar

    [HELP]: Multilevel menus in Navbar

    I tried using the Navbar example to create menu with three levels

    <Navbar>
          <Navbar.Menu>
                    <Navbar.Container>
                        <Navbar.Item dropdown={true} hoverable={true}>
                            <Navbar.Link>Main Menu</Navbar.Link>
                            <Navbar.Dropdown>
                                <Navbar.Item dropdown={true} hoverable={true}>
                                    <Navbar.Link>First level</Navbar.Link>
                                    <Navbar.Dropdown>
                                        <Navbar.Item dropdown={true} hoverable={true}>
                                            <Navbar.Link>Second level</Navbar.Link>
                                        </Navbar.Item>
                                    </Navbar.Dropdown>
                                </Navbar.Item>
                            </Navbar.Dropdown>
                        </Navbar.Item>
                    </Navbar.Container>
            </Navbar.Menu>
    </Navbar >
    

    This does not seem to work. I feel that I missing some crucial prop that would make the second level menu only show after hover. The current behaviour is that the first and second level menus are both shown.

    Any help here is greatly appreciated.

    question 
    opened by harishbsrinivas 0
  • Navbar demo fails to compile in React with Typescript

    Navbar demo fails to compile in React with Typescript

    Describe the bug When the code for the demonstration navbar is placed into a react component, it gives two errors and fails to compile. The first is that the dropdown prop in the Navbar.Item does not exist. The second is for the position prop on the Navbar.Container.

    Screen Shot 2021-07-18 at 6 44 42 PM

    Screen Shot 2021-07-18 at 6 44 59 PM

    To Reproduce Steps to reproduce the behavior:

    1. Create new react app with typescript
    2. Add a header component
    3. Place the demo text into the react app with the appropriate imports
    4. See error

    Expected behavior A clear and concise description of what you expected to happen.

    Screenshots If applicable, add screenshots to help explain your problem.

    Versions

    • react-bulma-components:: 4.0.7
    • bulma:0.9.3
    • react:17.0.2
    • Browser: Chrome 91.0.4472.114 and Firefox 89.0.2 (64-bit)
    bug 
    opened by jfoxworth 0
  • [HELP] Input DomRef Register Property 'current' is missing

    [HELP] Input DomRef Register Property 'current' is missing

    Hello, I am using React Bulma Components and React Form Hooks packages. At the input:

    type FormValues = {
        email: string;
        password: string
    }
    const {
        register, 
        handleSubmit, 
        formState: 
        { 
            errors, 
            isSubmitSuccessful, 
            isSubmitting 
        } 
    } = useForm<FormValues>();
    
    #return
    
    <Form.Input
        name="email"
        domRef={register({required: true})}
        type="email"
        placeholder="e.g. [email protected]"
        required
    />
    

    Gives me this error:

    Property 'current' is missing in type 'UseFormRegisterReturn' but required in type 'RefObject<"input">'.

    Its inside a functional component. I think I am doing something completely wrong and misunderstanding something,

    I found same issue here but I couldn't understand how to fix this.

    I tried this fix: #343 (comments)

    But then I get this error because I use functional component?

    328 at react-hook-form

    Thanks a lot.

    question 
    opened by phaitonican 7
  • Add standard img tag attribute support.

    Add standard img tag attribute support.

    While using this tool I came across the need to use the srcset attribute on my img tag but found that the attribute was being applied to the figure instead of the img tag. This change should add support for all standard img tag attibutes so they go where they belong.

    Example:

    <figure class="image jumbotron-img is-16by9" srcset="/images/homepage-main-768.jpg 768w, /images/homepage-main-1024.jpg 1024w, /images/homepage-main-1216.jpg 1216w, /images/homepage-main-1408.jpg 1408w, /images/homepage-main.jpg 6720w" sizes="100vw">
      <img class="" src="/images/homepage-main.jpg" alt="Homepage Main Image">
    </figure>
    

    Should output as:

    <figure class="image jumbotron-img is-16by9" >
      <img class="" src="/images/homepage-main.jpg" alt="Homepage Main Image" srcset="/images/homepage-main-768.jpg 768w, /images/homepage-main-1024.jpg 1024w, /images/homepage-main-1216.jpg 1216w, /images/homepage-main-1408.jpg 1408w, /images/homepage-main.jpg 6720w" sizes="100vw">
    </figure>
    

    This is my first attempt at modifying code on this project so please feel free to provide corrections or request adjustments. I'm not really familiar with TypeScript so I didn't modify that part and was unsure if I needed to.

    Ohhh and the prettier mod was to remove some line ending issue I was seeing (similar to: https://stackoverflow.com/questions/53516594/why-do-i-keep-getting-delete-cr-prettier-prettier). I use Windows for dev, I'm guessing you use Mac. Let me know if it causes issues on your end. πŸ˜„

    opened by Cleanshooter 0
  • Update navbar.story.mdx

    Update navbar.story.mdx

    Replace message description with navbar description.

    opened by Cleanshooter 0
  • Update message.story.mdx

    Update message.story.mdx

    Fixed typo

    opened by Cleanshooter 0
Releases(v4.0.7)
  • v4.0.7(Jun 28, 2021)

  • v4.0.6(May 28, 2021)

  • v4.0.5(May 28, 2021)

  • v4.0.4(May 13, 2021)

  • v4.0.3(May 5, 2021)

  • v4.0.2(Apr 29, 2021)

  • v4.0.1(Apr 28, 2021)

  • v4.0.0(Apr 24, 2021)

    We Finally release the V4. There are a lot of changes, so dont rush to update. We will try to setup a migration guide (but no promises here sorry u.u)

    • [Breaking Change] Move Bulma as a Peer Dependency
    • [Breaking Change] <List /> component is completely removed.
    • Bump Bulma version to 0.9.2
    • Improves TS support
    • New Storybook, with more details (and hopefully more helpful)
    • Enable Tree shaking by default

    All Components

    • New spacing modifiers. They have the same names as their equivalent Bulma class names. Refer to the official documentation for more information.
      • Usage: pt-0 in Bulma is equivalent to pt={0} in props. Applies to all spacing modifiers.
    • Added srOnly prop to all components to display only on screen readers
    • Add Support to textSize 7
    • [Breaking Change] Improve responsive helper props (mobile, tablet, desktop, widescreen, fullhd, touch, untilWidescreen, untilFullhd)
    • Added invisible to responsive props
    • hidden is now inside display prop, { hidden: true } become { display: 'hidden' }
    • Added invisible prop on all Components
    • [Breaking Change] Renamed the prop value centered to center on all components to use the same everywhere
    • Added display prop with same values as responsive display (bulma currently only support flex, hidden and relative at this level)
    • Added colorVariation prop to hancle light/dark color helpers
    • Added clickable prop
    • Added fontFamily prop

    Breadcrumb

    • [Breaking Change] Removed items props in favor of composition with Breadcrumb.Item

    Breadcrumb.Item

    • New Component

    Botton.Group

    • Deprecated gapless to hasAddons in Button.Group
    • [Breaking Change] Renamed position prop to align

    Columns

    • [Breaking Change] Remove gapless prop
    • [Breaking Change] Add variable gap prop
    • Add gap to responsive option

    Columns.Column

    • Merge common responsive props with Column responsive props

    Container

    • [Breaking Change] Removed fluid prop in favor to add it as an option of the breakpoint prop
    • Added max prop to allow use is-max-desktop and is-max-widescreen from bulma

    Dropdown

    • [Breaking Change] Dropdown component now accept an icon prop that will accept the the component to render the icon
    • [Breaking Change] Removed deprecated align prop in favor of boolean right prop

    Form.Control

    • [Breaking Change] Removed size props (did nothing)
    • Automatically add has-icon-left/right if an Icon with align is on the children

    Footer

    • Update default renderAs to footer

    Form.Field

    • Added size prop that will be also used on childrens that accept size as a prop Input, InputFile, Label, Icon, Button...

    Form.Input

    • [Breaking Change] Removed hovered and focused prop in favor to a state props that accept hover or focus as value

    Form.InputFile

    • Removed centered and right prop in favor to a align props that accept center or right as value

    Form.Label

    • Added size prop that will be used on components inside the Field, like Input, Select, Label...

    Form.Select

    • Added state props that accept hover or focus as value
    • Added rounded prop

    Form.Textarea

    • Removed hovered and focused prop in favor to a state props that accept hover or focus as value

    Hero

    • size prop its ignored if hasNavbar prop is set

    Hero.Head

    • Renamed to Hero.Header

    Icon

    • Removed the icon prop from the Icon component.
    • Add text prop to enable icon-text

    Level

    • Update default renderAs from div to nav

    Media.Content

    • Removed the whole component, use Content component insted

    Media.Item

    • Renamed position prop to align

    Modal

    • Renamed Modal.Card.Head to Modal.Card.Header
    • Renamed Modal.Card.Foot to Modal.Card.Footer
    • Close button on the top-right corner will be displayed always if the showClose prop is passed, (Before if the children was a card was not displayed)
    • Only need to pass onClose prop to Modal component, no need to pass if to any Modal.* any more

    Navbar.Item

    • Removed dropdown prop, it will be added automatically if a Navbar.Dropdown is detected on the childrens.

    Navbar.Container

    • Renamed position prop to align
    • Change align values from start,end to left/right

    Pagination

    • Renamed position prop to align

    Table

    • Add hoverable prop

    Table.Container

    • New Component

    Tile

    • Remove notification prop. You can use renderAs={Notification} if need it
    • Remove color prop.
    Source code(tar.gz)
    Source code(zip)
  • v3.4.0(Jun 29, 2020)

  • v3.1.3(Oct 8, 2019)

  • v3.1.2(Oct 6, 2019)

  • v3.0.1-5(May 3, 2019)

    • Fix Element response helpers on storybook
    • Manually disable pagination buttons
    • Allow multiple dropdown components on a page
    • List items with custom children now are correctly rendered as an anchor
    • Add inputProps to pass down props to the input element for InputFile Component
    • Revert breaking change on TS definition file
    Source code(tar.gz)
    Source code(zip)
  • v3.0.1-4(Mar 1, 2019)

  • v2.2.0(Oct 10, 2018)

  • v2.1.0(Oct 8, 2018)

    • Add color, date propTypes to input
    • Added Gatsby.js v2 webpack info to README.md
    • Refactor component to use Generic Element
    • Show real component name on storybook
    Source code(tar.gz)
    Source code(zip)
  • v2.0.0(Aug 16, 2018)

    A lot of Internal improvements!!

    • Migrated almost all components to funcional ones again (there are a few that have internal state so they are still classes).
    • Now all components have props for all the Bulma helpers https://bulma.io/documentation/modifiers/
    • The Mobile Menu of the navbar is now a controlled component so you should pass as prop if the menu its opened
    • The Storybook now have the working code of the component For example the Button
    • The Storybook now implement some knob to see how the compoent behave depending of the props
    • Added a new component Element that do no add any bulma class but have all the props to use the helpers Docs
    Source code(tar.gz)
    Source code(zip)
  • v1.5.0(Jun 23, 2018)

    • Updated nodemon to 1.17.5 (#50)
    • Add static class to static buttons (#46)
    • Support for search HTML5 input type (#47)
    • Updated Storybook for Icon component (improve documentation)
    Source code(tar.gz)
    Source code(zip)
  • v1.4.6(Jun 12, 2018)

    • Added support to text-weight helpers for Heading Component
    • Fix inconsistencies on sass files (has ; at the end of the import lines)
    • Added support to number type on Input component
    Source code(tar.gz)
    Source code(zip)
  • v1.4.5(May 28, 2018)

  • v1.4.4(May 28, 2018)

    • Fix Heading component to render a title by default
    • Fix Label component to not render an empty htmlFor by default
    • Add export statement for breadcrumb component
    Source code(tar.gz)
    Source code(zip)
  • v1.4.3(Apr 27, 2018)

  • v1.4.2(Apr 27, 2018)

    • Fix Icon component to not require icon prop (you can use a children component instead)
    • Add missing columns sizes (one-fifth, two-fifths, etc)
    • Update storybook to newer version
    • Prepare Image tag to support new sizes (introduced on Bulma 0.7)
    Source code(tar.gz)
    Source code(zip)
  • v1.3.1(Apr 2, 2018)

  • v1.3.0(Mar 30, 2018)

    • Improve modal component (do not mount if not necessary and pass down class names)
    • Fix names of the coponents to math their namesspaces (ex: ColumnsColumns to Columns.Column)
    Source code(tar.gz)
    Source code(zip)
  • v1.2.2(Mar 26, 2018)

  • 1.2.1(Dec 27, 2017)

  • 1.2.0(Dec 27, 2017)

  • 1.1.3(Dec 27, 2017)

  • 1.1.2(Dec 27, 2017)

Owner
John
John
Super Saiyan React components, son of awesome Bulma, implemented in TypeScript

Trunx Super Saiyan React components, son of awesome Bulma, implemented in TypeScript Status Almost all Bulma features are available and documented, fe

Gianluca Casati 58 Oct 14, 2021
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://

Anton Kulakov 461 Nov 20, 2021
🌲 Evergreen React UI Framework by Segment

Works out of the box. Evergreen contains a set of polished React components that work out of the box. Flexible & composable. Evergreen components are

Segment 11.3k Nov 27, 2021
a react-based framework that provides accessibility, modularity, responsiveness, and theming in a tidy package

Grommet: focus on the essential experience Documentation Visit the Grommet website for more information. Support / Contributing Before opening an issu

grommet 7.6k Nov 24, 2021
React utility component primitives & UI framework for use with Tailwind CSS

Tailwind React UI NB: As the 0.#.# version number suggests this is still very much work in progress, so semantic versioning will not be followed until

Ed Mortlock 242 Nov 28, 2021
A frontend Framework for building B2B applications running in the browser on top of REST/GraphQL APIs, using ES6, React and Material Design

react-admin A frontend Framework for building data-driven applications running in the browser on top of REST/GraphQL APIs, using ES6, React and Materi

marmelab 18.4k Dec 2, 2021
Elastic UI Framework πŸ™Œ

Elastic UI Framework The Elastic UI Framework is a collection of React UI components for quickly building user interfaces at Elastic. Not using React?

elastic 3.2k Dec 2, 2021
dataminr-react-components - Collection of reusable React Components and utility functions.

react-components A collection of reusable React components with their own Flux lifecycle. What's inside react-components? Table Component From a simpl

Dataminr 262 Oct 30, 2021
Fluent UI web represents a collection of utilities, React components, and web components for building web applications.

Fluent UI Web Fluent UI web represents a collection of utilities, React components, and web components for building web applications. This repo is hom

Microsoft 12.5k Nov 24, 2021
🧩 Medly components provides numerous themable react components, each with multiple varitaions of sizes, colors, position etc.

?? Medly components provides numerous themable react components, each with multiple varitaions of sizes, colors, position etc.

Medly 53 Nov 30, 2021
Bootstrap components built with React

React-Bootstrap Bootstrap 4 components built with React. Docs See the documentation with live editable examples and API documentation. To find the doc

react-bootstrap 20.2k Nov 23, 2021
Simple React Bootstrap 4 components

reactstrap Stateless React Components for Bootstrap 4. Getting Started Follow the create-react-app instructions to get started and then follow the rea

reactstrap 10.2k Nov 25, 2021
⚑️ Simple, Modular & Accessible UI Components for your React Applications

Build Accessible React Apps with Speed ⚑️ Chakra UI provides a set of accessible, reusable, and composable React components that make it super easy to

Chakra UI 22.3k Nov 26, 2021
:atom_symbol: React primitive UI components built with styled-system.

Rebass React primitive UI components built with Styled System. https://rebassjs.org npm i rebass Getting Started import React from 'react' import { Bo

Rebass 7.6k Nov 28, 2021
🧱 A suite of React components .

English | δΈ­ζ–‡η‰ˆ React Suite is a set of react component libraries for enterprise system products. It is a well-thought-out and developer-friendly UI fra

React Suite 6.3k Nov 24, 2021
React UI Components for macOS High Sierra and Windows 10

React UI Components for macOS High Sierra and Windows 10. npm install react-desktop --save Help wanted! I am looking for developers to help me develop

Gabriel Bull 9.3k Nov 21, 2021
React components and demo for the Tabler UI theme.

Update - June 2019: Version 2 Alpha now available on NPM: npm install [email protected] yarn add [email protected] Check out the latest progress and

Tabler 1.8k Nov 24, 2021
React components for easier customization and smooth development flow.

Sha-el-design React components for easier customization and smooth development flow. ?? Features ?? Material inspired design. ?? A complete package of

null 29 Nov 21, 2021
πŸ‘€ Easily apply tilt hover effect on React components - lightweight/zero dependencies

React Tilt ?? Easily apply tilt hover effect on React components Demo Demos created with React DemoTab ?? Install npm install react-parallax-tilt Feat

mkosir 389 Nov 26, 2021