@fikasio/react-ui-components

Installation

Use npm:

npm install --save @fikasio/react-ui-components

or Yarn:

yarn add @fikasio/react-ui-components

Usage

Import components from the package in your React application, for example:

import { Footer } from '@fikasio/react-ui-components';

Components

AutosaveLinkifiedTextarea

A textarea that saves after a pause or when it loses focus. URLs in the text are shown as links until the field is edited.

Props

Name	Type	Required	Description
onBlur	function	No	Handler called when the field loses focus
onChange	function	Yes	Handler called with the change event
onFocus	function	No	Handler called when the field gains focus
onSave	function	No	Handler called with the text when it should be saved
value	string	No	Controlled text content

It also accepts standard textarea attributes, such as id, name, and aria-label, and a ref.

AutosaveTextarea

Props

Name	Type	Required	Description
className	string	No	Additional CSS class name for the textarea
defaultValue	string	No	Initial text content of the textarea
name	string	No	Name attribute for the textarea input
onSave	function	No	Handler called when content should be saved
placeholder	string	No	Placeholder text when textarea is empty
style	CSSProperties	No	Additional CSS styles for the textarea
value	string	No	Controlled text content value

Breadcrumb

Props

Name	Type	Required	Description
className	string	No	Additional CSS class name for the Breadcrumb
items	array	No	Trail items (label, optional href and onClick). The last item is the current page
separator	ReactNode	No	Separator rendered between items. Defaults to /
style	CSSProperties	No	Additional CSS styles for the Breadcrumb

Button

Props

Name	Type	Required	Description
className	string	No	Additional CSS class name for the button
disabled	boolean	No	Whether the button is disabled
onClick	function	No	Handler called when button is clicked
style	CSSProperties	No	Additional CSS styles for the button

Checkbox

Props

Name	Type	Required	Description
className	string	No	Additional CSS class name for the checkbox
defaultIsChecked	boolean	No	Initial checked state of the checkbox
isChecked	boolean	No	Controlled checked state of the checkbox
name	string	No	Name attribute for the checkbox input
onClick	function	No	Click handler function for the checkbox
style	CSSProperties	No	Additional CSS styles for the Checkbox

ClickOutside

Calls onClickOutside when a click or touch ends outside its children. A click that follows a touch is ignored so the handler runs once.

Props

Name	Type	Required	Description
children	ReactNode	Yes	Content that counts as inside
onClickOutside	function	Yes	Called with the outside click or touch event

DatePicker

By default the calendar header uses single carets to move by month and double carets to move by year.

Props

Name	Type	Required	Description
className	string	No	Additional CSS class name for the DatePicker
dateFormat	string	No	Format for date value (e.g. 'yyyy-MM-dd')
defaultValue	Date	No	Initial date value
displayFormat	string	No	Format for displaying the date
displayFunction	function	No	Function for displaying the date
isOpen	boolean	No	Controls whether the picker is open
name	string	No	Name attribute for the input
onChange	function	No	Handler called when date selection changes
onClose	function	No	Handler called when picker closes
onOpen	function	No	Handler called when picker opens
onRemoveValue	function	No	Handler called when value is cleared
shouldCloseOnSelect	boolean	No	Whether to close picker after selection
showMonthDropdown	boolean	No	Show a month dropdown in the calendar header
showRemoveValue	boolean	No	Show option to clear the selected value
showTimeSelect	boolean	No	Enable time selection
showYearDropdown	boolean	No	Show a year dropdown instead of the year carets
style	CSSProperties	No	Additional CSS styles for the DatePicker
timeCaption	string	No	Label shown above time selector
timeFormat	string	No	Format for time value (e.g. 'HH:mm')
timeIntervals	number	No	Interval in minutes between time options
value	Date	No	Controlled date value

Dot

Props

Name	Type	Required	Description
className	string	No	Additional CSS class name for the Dot
color	string	No	Color of the dot (any valid CSS color)
size	number	No	Size of the dot in pixels
style	CSSProperties	No	Additional CSS styles for the dot

Error

Props

Name	Type	Required	Description
children	string/ReactNode	Yes	Content to display in the error message
className	string	No	Additional CSS class name for the Error
style	CSSProperties	No	Additional CSS styles for the Error

Footer

The Footer component provides a flexible layout with multiple sections for content placement. It can contain children elements in the center, left, right, and top positions.

Props

Name	Type	Required	Description
childrenCenter	ReactNode	No	Content to be displayed in the center section
childrenLeft	ReactNode	No	Content to be displayed in the left section
childrenRight	ReactNode	No	Content to be displayed in the right section
childrenTop	ReactNode	No	Content to be displayed in the top section
className	string	No	Additional CSS class name for the Footer
style	CSSProperties	No	Additional CSS styles for the Footer

Icon

SVG icons rendered with currentColor so they inherit the surrounding text color. Use <Icon name="cog" />, or import named icons such as CogIcon and UserIcon directly.

Available names:

• archive
• bars
• bell
• book
• bullseye
• calendar-alt
• caret-left
• caret-right
• check
• check-square
• clock
• cog
• copy
• download
• edit
• ellipsis
• list
• magnifying-glass
• message
• plus
• power-off
• project-diagram
• shapes
• sitemap
• sliders
• stopwatch
• th
• times
• user

Props

Name	Type	Required	Description
name	string	Yes	Icon to render
className	string	No	Additional CSS class name for the icon
size	'sm' | 'md' | '1x' | 'lg'	No	Icon size. 'md' is equivalent to '1x'. Defaults to '1x'
style	CSSProperties	No	Additional CSS styles for the icon

Input

A single-line text field that saves after a pause, when it loses focus, or when it unmounts with unsaved text. Set multiline to render a one-row textarea.

Props

Name	Type	Required	Description
autoFocus	boolean	No	Focus the field and place the caret at the start
className	string	No	Additional CSS class name for the field
defaultValue	string	No	Initial text. A new value is adopted while the field is not focused
delay	number	No	Milliseconds to wait after typing before saving. Defaults to 1000
multiline	boolean	No	Render a one-row textarea instead of an input
onBlur	function	No	Handler called when the field loses focus
onChange	function	No	Handler called with the current text
onFocus	function	No	Handler called when the field gains focus
onKeyDown	function	No	Handler called when a key is pressed
onKeyUp	function	No	Handler called when a key is released
onSave	function	No	Handler called with the text when it should be saved
placeholder	string	No	Placeholder text when the field is empty
style	CSSProperties	No	Additional CSS styles for the field

LoadingGif

Shows a loading image. It takes no props.

SearchBar

Props

Name	Type	Required	Description
ariaLabel	string	No	Accessible name for the input
autoComplete	string	No	Autocomplete attribute for the input
className	string	No	Additional CSS class name for the SearchBar
defaultValue	string	No	Initial value for uncontrolled input
filterOptions	boolean	No	Filter string options by the input. Defaults to true
getOptionKey	function	No	Stable key for an option
onChange	function	No	Handler called when input value changes
onSelect	function	No	Handler called when an option is selected from the menu
onSubmit	function	No	Handler called when Enter is pressed without a highlighted option
options	array	No	Suggestion options that will appear below
placeholder	string	No	Placeholder text when the input is empty
renderOption	function	No	Custom content for an option
style	CSSProperties	No	Additional CSS styles for the SearchBar
type	string	No	Input type, text or search. Defaults to text
value	string	No	Controlled input value

String options are filtered as you type. Pass objects with renderOption, and set filterOptions to false when the list is already filtered.

Select

Props

Name	Type	Required	Description
className	string	No	Additional CSS class name for the Select
defaultValue	string	No	Initial value for uncontrolled select
disabled	boolean	No	Whether the select is disabled
name	string	No	Name attribute for the select
onChange	function	No	Handler called when select value changes
options	array	Yes	Array of options to display in the select
style	CSSProperties	No	Additional CSS styles for the Select
value	string	No	Controlled select value

Selector

Props

Name	Type	Required	Description
className	string	No	Additional CSS class name for the Selector
defaultValue	string	No	Initial value for uncontrolled select
name	string	No	Name attribute for the select
onChange	function	No	Handler called when select value changes
options	array	No	Array of options to display in the select
render	function	No	Describes how to render the main button
style	CSSProperties	No	Additional CSS styles for the Selector
value	string	No	Controlled select value

Success

Props

Name	Type	Required	Description
className	string	No	Additional CSS class name for the Success
style	CSSProperties	No	Additional CSS styles for the Success

Tabs

Props

Name	Type	Required	Description
className	string	No	Additional CSS class name for the Tabs
defaultValue	string	No	Initial value for uncontrolled tabs
onChange	function	No	Handler called when the selected tab changes
options	array	No	Tabs to display (label, value, optional content and disabled)
style	CSSProperties	No	Additional CSS styles for the Tabs
value	string	No	Controlled selected tab value

Table

Renders the rows you pass as children. Set responsive to allow horizontal scrolling.

Props

Name	Type	Required	Description
bordered	boolean	No	Draw borders around cells
children	ReactNode	No	thead and tbody content
className	string	No	Additional CSS class name for the table
hover	boolean	No	Highlight a row when the pointer is over it
responsive	boolean	No	Wrap the table so it can scroll horizontally
style	CSSProperties	No	Additional CSS styles for the table

Warning

Props

Name	Type	Required	Description
className	string	No	Additional CSS class name for the Warning
style	CSSProperties	No	Additional CSS styles for the Warning

Hooks

useTheme

Reads the current library theme, and optionally sets it. The default is light. Allowed values are light and dark.

Call it near the root of your app to set the theme:

import { useTheme, Button } from '@fikasio/react-ui-components';

function App() {
  useTheme('dark');

  return (
    <Button>Save</Button>
  );
}

Call it with no argument to read the current theme:

const theme = useTheme();

Parameters

Name	Type	Required	Description
newTheme	string	No	Theme to apply ('light' or 'dark'). Invalid values are ignored and log an error

Returns

The current theme: 'light' or 'dark'.

Development

See DEVELOPMENT.md.