{"id":13400500,"url":"https://github.com/couds/react-bulma-components","last_synced_at":"2025-05-14T17:05:19.721Z","repository":{"id":40212755,"uuid":"103955573","full_name":"couds/react-bulma-components","owner":"couds","description":"React components for Bulma framework","archived":false,"fork":false,"pushed_at":"2024-06-15T09:09:29.000Z","size":9203,"stargazers_count":1205,"open_issues_count":24,"forks_count":126,"subscribers_count":22,"default_branch":"master","last_synced_at":"2025-05-14T17:04:26.523Z","etag":null,"topics":["bulma","bulma-framework","css","react","react-components"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/couds.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-09-18T15:14:39.000Z","updated_at":"2025-05-11T20:17:27.000Z","dependencies_parsed_at":"2024-01-13T19:20:19.886Z","dependency_job_id":"cb94167d-ae15-492d-91da-0ca4e3354260","html_url":"https://github.com/couds/react-bulma-components","commit_stats":{"total_commits":320,"total_committers":61,"mean_commits":5.245901639344262,"dds":0.6375,"last_synced_commit":"3fc281a9823a1f7bce913873e06485b28eb43dcf"},"previous_names":[],"tags_count":79,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/couds%2Freact-bulma-components","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/couds%2Freact-bulma-components/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/couds%2Freact-bulma-components/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/couds%2Freact-bulma-components/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/couds","download_url":"https://codeload.github.com/couds/react-bulma-components/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254190396,"owners_count":22029632,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bulma","bulma-framework","css","react","react-components"],"created_at":"2024-07-30T19:00:52.681Z","updated_at":"2025-05-14T17:05:19.702Z","avatar_url":"https://github.com/couds.png","language":"JavaScript","funding_links":[],"categories":["Uncategorized","UI Frameworks \u0026 Libraries","UI Frameworks","JavaScript","react","css","React [🔝](#readme)"],"sub_categories":["Uncategorized","style"],"readme":"\u003cdiv style=\"text-align: center\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/couds/react-bulma-components/master/static/img.png\" width=\"128\" style=\"margin-top: 3px\" /\u003e\u003c/div\u003e\n\n# React Bulma Components\n\n\n[![Build Status](https://travis-ci.org/couds/react-bulma-components.svg?branch=master)](https://travis-ci.org/couds/react-bulma-components)\n[![Coverage Status](https://coveralls.io/repos/github/couds/react-bulma-components/badge.svg?branch=master)](https://coveralls.io/github/couds/react-bulma-components?branch=master)\n[![Release Version](https://img.shields.io/github/release/couds/react-bulma-components.svg)](https://github.com/couds/react-bulma-components)\n[![Npm Downloads](https://img.shields.io/npm/dm/react-bulma-components.svg)](https://www.npmjs.com/package/react-bulma-components)\n\nReact components for [Bulma](http://bulma.io/) (v0.9.2) UI compatible with most used React Frameworks ([Gatsby](https://www.gatsbyjs.org/), [CRA](https://github.com/facebook/create-react-app), [Next.js](https://nextjs.org/))\n\n## To Install\n\n\n```npm install react-bulma-components``` or ```yarn add -E react-bulma-components```\n\n\n## Documentation\n\nYou can find the documentation in https://react-bulma.dev/en/storybook\n\nSome 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\n\n## To Use\n\n```javascript\nimport React from 'react';\nimport 'bulma/css/bulma.min.css';\nimport { Button } from 'react-bulma-components';\n\nexport default () =\u003e (\n  \u003cButton color=\"primary\"\u003eMy Bulma button\u003c/Button\u003e\n)\n```\n\nForm elements are imported as part of the Form class.\n\n```javascript\nimport { Form } from 'react-bulma-components';\n\nconst { Input, Field, Control, Label } = Form;\n```\n\n## SASS support\n\nSince CSS logic is separated from this library, there is no special setup required with the library. Simply follow\nthe [instructions](https://bulma.io/documentation/overview/modular/) in the official documentation. You only need to\nmake sure the CSS is properly imported for your website.\n\nStarting from v4, tree shaking is supported, so only the code of the components you have imported will be bundled.\n\n## FAQ\n\n### Use Button to render a Link from React-Router\nWe allow custom render component on all our components, to do it you can use the `renderAs` props like this\n\n```javascript\nimport React from 'react';\nimport { Button } from 'react-bulma-components';\nimport { Link } from 'react-router';\n\nconst CustomLink = ({ to }) =\u003e {\n  return (\n    \u003cButton to={to} renderAs={Link}\u003e\n      My react router link\n    \u003c/Button\u003e\n  )\n}\n\n```\n\n\n### Adding ref to a component\nWe use a custom prop to pass down the ref to the next dom object. (instead to the instance of the component).\n\n```javascript\nconst TestComponent = () =\u003e {\n  const buttonRef = useRef(null);\n  return \u003cButton domRef={buttonRef}\u003ebutton\u003c/Button\u003e\n}\n```\n\n**Why we do this instead of using** [React.forwardRef](https://reactjs.org/docs/forwarding-refs.html)? 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.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcouds%2Freact-bulma-components","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcouds%2Freact-bulma-components","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcouds%2Freact-bulma-components/lists"}