React.js components for Modern CSS framework based on Flexbox

Overview

React-Bulma

React.js components for Modern CSS framework based on Flexbox

2017-06-01 2 52 24

2017-06-01 2 52 24

JavaScript Style Guide

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

2017-10-10 22 16 02

Issues
  • Consider to use classnames package for create a class

    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.

    enhancement 
    opened by kresli 5
  • Create a npm package

    Create a npm package

    Please create a npm package.

    opened by roman-16 3
  • SubTitle file name mismatch (v3.0)

    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 disk SubTitle.js.

    Steps to Reproduce

    1. create-react-app
    2. yarn add reactbulma
    3. import { SubTitle } from 'reactbulma'

    Expected behavior

    Successful compilation

    Actual behavior

    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 disk `SubTitle.js`.
    

    please note this issue is not occuring in v1.1.1

    opened by jitcoder 2
  • Why this approach ?

    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 booleans values, instead of enums.

    For example, for the Icon component, you have to manually set the size like so

    <Icon small>
      <i class="icon"></i>
    </Icon>
    

    Why not do the following:

    const size = 'small'
    
    <Icon size={size}>
      <i class="icon"></i>
    </Icon>
    

    where the size props is an enumerable value, with the following possibilities: small, medium, large. And, you have the possibility to dynamically inject the size 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.

    opened by gaillota 2
  • Typescript definition file for prop types

    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 the PropTypes 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.

    opened by thib92 1
  • Add events for buttons, inputs, etc..

    Add events for buttons, inputs, etc..

    It would be nice to have onClick events and onChange event for the buttons, inputs etc..

    opened by dasmikko 1
  • Bug fix: fixed subtitle import in index.js

    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: screen shot 2018-04-17 at 11 37 27 pm

    Tasks

    • [x] Change import line
    • [x] Bump package path

    Note to the core devs

    Please merge this PR and publish 3.0.1 version so we can use the latest version of reactbulma.

    opened by gustavo-depaula 1
  • Ratio modifiers support update

    Ratio modifiers support update

    Suggested fix for issue #26

    opened by m8r1x 1
  • Ratio modifiers support for images

    Ratio modifiers support for images

    I did a github search in the repo for sizes such as 4by5, 3by4 and 2by3 where the width > 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?

    opened by m8r1x 1
  • Document has typo

    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.

    opened by masayannuu 1
  • Footer

    Footer

    Hi - any reason the Layout Footer component is missing?

    opened by axelhuizinga 1
  • Support TypeScript?

    Support TypeScript?

    Hello.

    What about supporting TypeScript? When I try to use, I see this:

     Try `npm install @types/reactbulma` if it exists or add a new declaration (.d.ts) file containing `declare module 'reactbulma';`
    

    And, of cause, npm install @types/reactbulma do nothing. Would be great to start supporting TS at middle of 2018 for your awesome package..

    opened by koddr 6
  • add nocss option

    add nocss option

    This pull request addresses #13 in a non-breaking way. You could use it like this:

    import { Hero } from 'reactbulma/lib/components/nocss'
    import './styles.scss'
    
    class BlogIndex extends React.Component {
      render() {
        return (
          <Hero>
            <Hero.Body>
              Hello World
            </Hero.Body>
          </Hero>
        )
      }
    }
    

    And styles.scss:

    @import 'variables'; // custom variable overrides
    @import '~bulma/bulma.sass';
    
    opened by gordonmleigh 1
  • Suggested approach for focussing inputs after render

    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 rendered input tag, and the focus() call is not forwarded:

    componentDidMount() {
      this.inputField.focus();
    }
    
    render() {
      return (
         <div>
            <Input ref={ (input) => { this.inputField = input } } name="foo" /> 
         </div>
      )
    }
    

    I'm quite new to React, so maybe I'm missing something.

    Thanks.

    opened by samlown 4
  • Columns?

    Columns?

    Columns are missing?

    opened by saiteki-kai 14
  • ERROR in ./node_modules/bulma/css/bulma.css

    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...

    opened by Flo-Slv 5
  • Nav elements broken

    Nav elements broken

    Nav element has been replaced with NavBar in Bulma CSS codebase.

    https://bulma.io/documentation/components/navbar/

    enhancement 
    opened by mdomarus 2
  • SASS variable overrides

    SASS variable overrides

    First off, thanks for creating this project! I am beginning to use it and it has been very easy to integrate. I was wondering if you've thought about a way to implement overrides for any of the SASS variables in Bulma? What comes to mind is overriding what the primary color is or the default font-family.

    I'd be happy to help with this, but I don't know what that implementation would look like.

    opened by jamesmosier 6
Owner
Anton Kulakov
Fullstack JavaScript Developer
Anton Kulakov
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.7k Jan 14, 2022
React components for Bulma framework

React-bulma-components React components for Bulma (v0.8.2) UI compatible with most used React Frameworks (Gatsby, CRA, Next.js) V4 Pool Please Check h

John 1.1k Jan 12, 2022
Modern and minimalist React UI library.

Modern and minimalist React UI library, originating from Vercel's design. Quick Start run yarn add @geist-ui/react or npm i @geist-ui/react install it

Geist 2.6k Jan 15, 2022
⚛️A beautiful and modern React design system.

Shards React is a free, beautiful and modern React UI kit based on Shards. Documentation & Demo • Official Page Getting Started Getting started with S

DesignRevision 707 Jan 10, 2022
A React Component library for buliding modern applications easily & quickly.

A React Component library for building modern applications easily & quickly

Elementz 340 Jan 18, 2022
A modern credit card component for React

React Payment Card Component | A modern credit card component for React This React component will help you building your checkout on your e-commerce.

Pagar.me 83 Nov 13, 2021
A modern, comprehensive, flexible design system and React UI library

A modern, comprehensive, flexible design system and UI library. Quickly build beautiful React apps.

null 5.1k Jan 16, 2022
A modern React implementation of the Authorize.net platform's Accept.JS library for easily submitting payments to the Authorize.net platform.

react-acceptjs A modern React implementation of Authorize.net's Accept.JS library for easily submitting payments to the Authorize.net platform. Instal

Brendan Bond 2 Dec 12, 2021
VechaiUI – React components with built-in dark mode using Tailwind CSS

Collection of accessible React UI components with the built-in dark theme using Tailwind CSS. Pre-designed headless ui and radix-ui.

null 738 Jan 17, 2022
A set of completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.

Headless UI A set of completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS. Documentation For full

Tailwind Labs 12.7k Jan 17, 2022
A comprehensive React UI components library based on the Arco Design system.

A comprehensive React UI components library based on the Arco Design system.

null 2.6k Jan 17, 2022
DevUI components based on React

DevUI components based on React

Xie Jay 25 Jan 10, 2022
Slot-based children organization for React components.

React Slot Pattern Slot-based children organization for React. Component useSlot hook is a selector for named slots. withSlot wrapper function generat

Kerim Tuncer 3 Dec 11, 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.4k Jan 18, 2022
👟 rbx – The Comprehensive Bulma UI Framework for React

rbx – The Comprehensive Bulma UI Framework for React ?? Read the docs. ?? I'll wait, go check them out! Features up-to-date Bulma implementation (0.7.

Devin Fee 474 Jan 7, 2022
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.7k Jan 14, 2022
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.3k Jan 21, 2022
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 263 Dec 17, 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.7k Jan 14, 2022