All Projects → couds → React Bulma Components

couds / React Bulma Components

Licence: mit
React components for Bulma framework

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to React Bulma Components

React Bulma
React.js components for Modern CSS framework based on Flexbox
Stars: ✭ 449 (-55.76%)
Mutual labels:  react-components, bulma
React Atlas
Composable React components with CSS Modules.
Stars: ✭ 36 (-96.45%)
Mutual labels:  react-components
Wix Style React
A collection of React components that conform to Wix Style.
Stars: ✭ 798 (-21.38%)
Mutual labels:  react-components
Predix Ui
Un-official Predix Design System React Components
Stars: ✭ 12 (-98.82%)
Mutual labels:  react-components
Base
React-UI-Kit - frontend library with ReactJS components
Stars: ✭ 18 (-98.23%)
Mutual labels:  react-components
React Absolute Grid
An absolutely positioned, animated, filterable, sortable, drag and droppable, ES6 grid for React.
Stars: ✭ 910 (-10.34%)
Mutual labels:  react-components
Awesome Ui Component Library
Curated list of framework component libraries for UI styles/toolkit
Stars: ✭ 702 (-30.84%)
Mutual labels:  react-components
Should Enzyme
Useful functions for testing React Components with Enzyme.
Stars: ✭ 41 (-95.96%)
Mutual labels:  react-components
Enso
Laravel Vue SPA, Bulma themed. For demo login use `[email protected]el-enso.com` & `password` -
Stars: ✭ 959 (-5.52%)
Mutual labels:  bulma
React Redux Idle Monitor
Higher order react component for redux-idle-monitor.
Stars: ✭ 10 (-99.01%)
Mutual labels:  react-components
React Rewards
Package containing a few microinteractions you can use to reward your users for little things and make them smile!
Stars: ✭ 841 (-17.14%)
Mutual labels:  react-components
Pokedexvuejs
A Pokedex that will contain all 807 pokemon from the Pokemon series. Created in Vue.js
Stars: ✭ 19 (-98.13%)
Mutual labels:  bulma
Zeronet Dev Center
A Development Center for the ZeroNet. Tutorials on ZeroNet Zite Development, Collaboration, and Questions
Stars: ✭ 21 (-97.93%)
Mutual labels:  bulma
Zarm
基于 React、React-Native 的移动端UI组件库
Stars: ✭ 816 (-19.61%)
Mutual labels:  react-components
Hellobooks
A Single-Page Library Management App built with nodejs, express and react and redux
Stars: ✭ 37 (-96.35%)
Mutual labels:  react-components
Baseweb
A React Component library implementing the Base design language
Stars: ✭ 7,213 (+610.64%)
Mutual labels:  react-components
Folo
📋 Form & Layout JS Components
Stars: ✭ 26 (-97.44%)
Mutual labels:  react-components
Create Component App
Tool to generate different types of React components from the terminal. 💻
Stars: ✭ 879 (-13.4%)
Mutual labels:  react-components
Axiom React
Axiom - Brandwatch design system and React pattern library
Stars: ✭ 41 (-95.96%)
Mutual labels:  react-components
Xui Module
Light module to help design websites with Nuxt.
Stars: ✭ 39 (-96.16%)
Mutual labels:  bulma

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 Beta Now Available!

Try it out now: npm i [email protected]

v4 removes dependency on bulma, so you'll have to install it yourself. v4 supports Bulma up to v0.9.1. Also included in the versions are TypeScript support, bug fixes and new props/missing features. Check out this issue for the full changelog and what is being worked on.

We are also working on a brand-new documentation site that will be released soon. Stay tuned!

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.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].