https://github.com/bodynar/bodynarf.react-components

React components based on Bulma framework
https://github.com/bodynar/bodynarf.react-components

bulma component-library npm-package react typescript

Last synced: about 1 month ago
JSON representation

React components based on Bulma framework

• Host: GitHub
• URL: https://github.com/bodynar/bodynarf.react-components
• Owner: bodynar
• Created: 2022-05-31T20:13:53.000Z (over 2 years ago)
• Default Branch: master
• Last Pushed: 2024-04-13T23:53:35.000Z (9 months ago)
• Last Synced: 2024-04-14T13:12:36.624Z (9 months ago)
• Topics: bulma, component-library, npm-package, react, typescript
• Language: TypeScript
• Homepage: https://bodynar.github.io/bodynarf.react-components/
• Size: 370 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 6
• Metadata Files:
  • Readme: readme.md

Awesome Lists containing this project

README

        
# About

Small library with react components based on Bulma CSS framework  

	



## Installation

1. Install [React](https://reactjs.org/)

2. Install [Bulma](https://bulma.io/)

3. Make sure you imported bulma styles in parent container

4. *(Optional)* To use **Icon** component - install [Bootstrap Icons](https://icons.getbootstrap.com/) and make sure you imported these styles in parent container

5. *(Optional)* To use **Checkbox** component - install [bulma-checkradio](https://www.npmjs.com/package/bulma-checkradio) and make sure you imported these styles in parent container

## Demo

Demo of using all components can be found on https://bodynar.github.io/bodynarf.react-components/ (or open latest build in github repository)

## Description

Mostly all components have root css class with `bbr-` prefix. BBR - Bodynarf Bulma React

### Simple components

Simple react components based on html elements.

#### Controls

 - **Checkbox** - (*see p.5 of installation*) Checkbox component based on [bulma-checkradio](https://wikiki.github.io/form/checkradio)

 - **ColorPicker** - control that allows picking color (with preview option)

 - **Date** - date input

 - **Multiline** - multiline text input

 - **Number** - number input with step

 - **Password** - single line password input (requires icon, see icon component description)

 - **Text** - single line text input;

#### Components

 - **Anchor** - simple anchor (link) component

 - **Button** - button that allows user to interact with system by clicking it _(assume everyone knows what is button)_

 - **Icon** - *see p.4 of installation*

 - **Tag** - small component stands for tag visualization

 - **BreadCrumbs** - speaks for it self

 - **Table** - table with sortable headers

### Complex components

Complex components is set of components built via combining simple components or represent complex logical component

 - **Accordion** - Collapsible container that can hide some content inside

 - **Dropdown** - Custom dropdown component, based on html div elements & css (requires icon, see icon component description)

 - **Multiselect** - Dropdown with option to select several records

 - **Paginator** - Pagination elements to navigate through paged list

	Example:

	```tsx

		const [{ currentPage, pagesCount, onPageChange }, paginate] = usePagination(items.length, ITEMS_PER_PAGE);

		const pageItems = useMemo(() => paginate(items), [paginate, items]);

		// ...

		

	```

 - **Search** - Search bar with optional button to perform search

 - **Tabs** - Container for multi-content with option of switching displaying content without refreshing\scrolling page

### Hooks

 - **useComponentOutsideClick** - Attach watcher for mouse clicks and emit event when click was outside of component

 - **usePagination** - Create a pagination config to easily manipulate with Paginator component

 - **useUnmount** - Handle component unmounting event. Useful as component cleanup fn