@bodynarf/react.components v1.9.0
About
Small library with react components based on Bulma CSS framework
Installation
- Install React
- Install Bulma
- Make sure you imported bulma styles in parent container
- (Optional) To use Icon component - install Bootstrap Icons and make sure you imported these styles in parent container
- (Optional) To use Checkbox component - install 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
- 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)
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]); // ... <Paginator count={pagesCount} currentPage={currentPage} onPageChange={onPageChange} /> ```
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
2 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
12 months ago
12 months ago
11 months ago
12 months ago
11 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
11 months ago
11 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago