react-bulma-components
    TypeScript icon, indicating that this package has built-in type declarations

    4.0.7 • Public • Published

    React Bulma Components

    Build Status Coverage Status Release Version Npm Downloads

    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.

    Install

    npm i react-bulma-components

    DownloadsWeekly Downloads

    3,810

    Version

    4.0.7

    License

    MIT

    Unpacked Size

    950 kB

    Total Files

    571

    Last publish

    Collaborators

    • avatar