@symply.io/basic-components NPM

It is available as an npm package.

// with npm
npm install @symply.io/basic-components

// with yarn
yarn add @symply.io/basic-components

This project is licensed under the terms of the MIT license.

All components include these 2 properties to customize the theme

Name	Type	Default	Required	Description
primaryColor	CSSProperties"color"		false	Primary color for the theme
secondaryColor	CSSProperties"color"		false	Secondary color for the theme

Diglog component for alerts or confirmations.

import { AlertDialog } from '@symply.io/basic-components/';
// or 
import AlertDialog from '@symply.io/basic-components/AlertDialog';

Name	Type	Default	Required	Description
children	node		true	Dialog content.
DialogButtons	element		false	Customized dialog action buttons.
maxWidth	'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| false	'md'	false	Determine the max-width of the dialog. The dialog width grows with the size of the screen. Set to `false` to disable `maxWidth`.
onClose	func		true	Callback fired when the component requests to be closed.Signature:`function() => void`
open	bool	false	true	If `true`, the component is shown.
title	string	'Info'	false	Dialog title

A normal text input enhanced by a panel of suggested options.

It is extended from @mui/material/TextField, so it includes all properties of @mui/material/TextField.

import { Autocomplete } from '@symply.io/basic-components/';
// or 
import Autocomplete from '@symply.io/basic-components/Autocomplete';

Name	Type	Required	Description
label	string	true	Option label.
value	string \| number	false	Option valie.
name	unknown	false	Customized option property

Name	Type	Default	Required	Description
limitTags	number	-1	false	The maximum number of tags that will be visible when not focused. Set `-1` to disable the limit.
multiple	bool	false	false	If `true`, `value` must be an array and the menu will support multiple selections.
onChange	func		true	Callback fired when the `Input` value is changed.Signature:`function(value: Array<IOption\|string>\|IOption\|string\|null) => void`value: The value of the `Input` element.
options	Array<IOption\|string>		true	Array of suggestion options.
value	string		true	The value of the `Input` element.

A normal text input enhanced by a panel of suggested options and filter.

It is extended from @mui/material/TextField, so it includes all properties of @mui/material/TextField.

import { AutocompleteWithFilter } from '@symply.io/basic-components/';
// or 
import AutocompleteWithFilter from '@symply.io/basic-components/AutocompleteWithFilter';

Name	Type	Required	Description
label	string	true	Option label.
value	string \| number	false	Option valie.
name	unknown	false	Customized option property

Name	Type	Default	Required	Description
disableCloseOnSelect	bool	false	false	If `true`, the popup won't close when a value is selected.
limitTags	number	-1	false	The maximum number of tags that will be visible when not focused. Set `-1` to disable the limit.
multiple	bool	false	false	If `true`, `value` must be an array and the menu will support multiple selections.
onChange	func		true	Callback fired when the `Input` value is changed.Signature:`function(value: Array<IOption\|string>\|IOption\|string\|null) => void`value: The value of the `Input` element.
options	Array<IOption\|string>		true	Array of suggestion options.
value	string		true	The value of the `Input` element.

Reusable modal component.

It is extended from @mui/material/Dialog, so it includes all properties of @mui/material/Dialog.

import { BasicModal } from '@symply.io/basic-components/';
// or 
import BasicModal from '@symply.io/basic-components/BasicModal';

Name	Type	Default	Required	Description
cancelText	string	'Cancel'	false	The text of the cancel button.
children	node		true	The content of the component.
color	'primary' \| 'secondary' \| 'success' \| 'error' \| 'info' \| 'warning' \| undefined	'primary'	false	The main color of the component.
desc	string		false	Some descriptions you want to add, similar to a subtitle.
disabled	bool	false	false	If `true`, the submit button would be disabled.
hideBottomButtons	bool	false	false	If `true`, hide all action buttons at the bottom of the modal.
loading	bool	false	false	If `true`, the submit and cancel buttons would be disabled.
maxWidth	'xs' \|'sm' \|'md' \|'lg' \|'xl'	'sm'	false	Determine the max-width of the dialog. The dialog width grows with the size of the screen. Set to `false` to disable `maxWidth`.
noForm	bool	false	False	If `true`, put the content and action buttons out of a form element.
onClose	func		true	Callback fired when the cancel button requests to be clicked.Signature:`function() => void`
onSubmit	func		true	Callback fired when the submit button requests to be clicked.Signature:`function() => void`
open	bool	false	true	If `true`, the component is shown.
ref	ref		false	You can get the form "onSubmit" function from the ref.
scroll	'body' \| 'paper'	'paper'	false	Determine the container for scrolling the dialog.
showTopRightCloseButton	bool	false	false	If `true`, show a close icon button at the top right of the modal.
submitText	string	‘Save’	false	The text of the submit button.
title	string		true	The title of the component, to show at the top left.

A list of links that help a user visualize a page's location within the hierarchical structure of a website, and allow navigation up to any of its "ancestors".

import { BreadCrumbs } from '@symply.io/basic-components/';
// or 
import BreadCrumbs from '@symply.io/basic-components/BreadCrumbs';

Name	Type	Default	Required	Description
routes	Array<{ href?: string; label: string }>		true	All routes of "ancestors"

Checkboxes allow the user to select one or more items from a set.

It is extended from @mui/material/Checkbox, so it includes all properties of @mui/material/Checkbox.

import { CheckBox } from '@symply.io/basic-components/';
// or 
import CheckBox from '@symply.io/basic-components/CheckBox';

Name	Type	Default	Required	Description
label	string \| ReactElement		true	The label of the checkbox.
onChange	func		true	Callback fired when the `checkbox` value is changed.Signature:`function(value: boolean) => void`value: The value of the `checkbox` element.

Checkboxes allow the user to select one or more items from a set for a group.

It is extended from @mui/material/FormGroup, so it includes all properties of @mui/material/FormGroup.

import { CheckBoxGroup } from '@symply.io/basic-components/';
// or 
import CheckBoxGroup from '@symply.io/basic-components/CheckBoxGroup';

Name	Type	Default	Required	Description
Checkboxes	Array\<CheckBoxProps>		true	The array of checkboxes.See the property of CheckBox

A fab button with icon and text

import { ClickableFabButton } from '@symply.io/basic-components/';
// or 
import ClickableFabButton from '@symply.io/basic-components/ClickableFabButton';

Name	Type	Default	Required	Description
color	"primary" \|"secondary" \|"success" \|"error" \|"info" \|"warning"	"primary"	false	The button color.
disabled	bool	false	false	If `true`, the button would be disabled.
fabIcon	ReactElement		true	The icon element..
onClick	func		true	The function for button clicking.Signature:`function() => unknown`
text	string		true	The button text.

A common component for rendering the copyright

import { Copyright } from '@symply.io/basic-components/';
// or 
import Copyright from '@symply.io/basic-components/Copyright';

Reusable table component

import { DataTable, useDataTable } from '@symply.io/basic-components';
// or 
import DataTable, { useDataTable } from '@symply.io/basic-components/DataTable';

Name	Type	Required	Description
accessor	string	true	The key of the column, it should be unique.
align	"left" \|"center" \|"right"	false	The alignment of the column.
Body	ReactElement	true	The component to render the column body cell.
fixable	"left" \| "right" \|undefined	false	If not undefined, the column can be frozen. ⚠️ It doesn't work with IE11.
Footer	ReactElement	false	The component to render the column footer cell.
Header	ReactElement	true	The component to render the column header cell.
headerTip	string	false	The tip title text when the mouse is over the header.
sortable	bool	false	If true, the column can be sortable.
width	number	false	The fixed width of cells.

Name	Type	Default	Required	Description
accessor	string		true	The key of the column.
order	"ASC" \| "DESC" \| "NONE"		true	The sorting order.

Name	Type	Required	Description
columns	Array\<ColumnProps>	true	table columns
data	Array<{ name: unknown }>	true	table data/rows
disableSortBy	bool	false	If true, the whole table can't be sortable.
initialState	{ sortBy?: SortingProps}	false	Set the initial states
onSort	func	false	The function for sorting rows.Signature:`function(props: SortingProps) => unknown`

Name	Type	Description
columns	Array\<TableBodyCellProps>	The cells for the body.
footers	Array\	The cells for the footer.
headers	Array\<TableHeaderCellProps>	The cells for the header.
rows	Array<RowProps>	The rows for the table.
onResetSorting	func	An one-key function for resetting sorting to the initial state.

Name	Type	Default	Required	Description
columns	Array\<TableBodyCellProps>		true	The cells for the body. (from the hook)
dense	bool		false	If `true` the table size/density would be tight.
footers	Array\	[]	false	The cells for the footer. (from the hook)
footerBgColor	CSSProperties"color"		false	Customized footer background color.
footerTextColor	CSSProperties"color"		false	Customized footer text color.
headers	Array\<TableHeaderCellProps>		true	The cells for the header. (from the hook)
headerBgColor	CSSProperties"color"		false	Customized header background color.
headerTextColor	CSSProperties"color"		false	Customized header text color.
noDataText	string	'No Data!'	false	The text when no data rendered.
onContextMenu	func		false	The function for row right-clicking.Signature:`function(event: MouseEvent, row: RowProps) => unknown`
onCustomizeRowBgColor	func		false	The function for customizing the row background color.Signature:`function(props: {row: RowProps, columns: Array\<ColumnProps\>}) => {normal?: HexColor;<br/> hover?: HexColor;<br/>}`
onRowClick	func		false	The function for row clicking.Signature:`function(row: RowProps) => unknown`
rows	Array<RowProps>		true	The rows for the table. (from the hook)

Input component for full date (MM/DD/YYYY)

import { FullDateInput } from '@symply.io/basic-components/';
// or 
import { FullDateInput } from '@symply.io/basic-components/DateInput'; 
// or 
import FullDateInput from '@symply.io/basic-components/DateInput/FullDateInput';

Name	Type	Default	Required	Description
error	boolean		false	If `true`, the label is displayed in an error state.
helperText	string		false	The helper text content.
margin	'dense' \| 'none' \| 'normal'	'none'	false	If `dense` or `normal`, will adjust vertical spacing of this and contained components.
name	string		false	Name attribute of the `input` element.
onBlur	func		false	Callback fired when the `input` is blurred. Notice that the first argument (event) might be undefined.
onChange	func		true	Callback fired when the `Input` value is changed.Signature:`function(value: string) => void`value: The value of the `Input` element.
onFocus	func		false	Callback fired when the `input` is focused.
onValidate	func		false	Customized validation function.
value	string		true	The value of the `Input` element.

Input component for month day (MM/DD)

import { MonthDayInput } from '@symply.io/basic-components/';
// or 
import { MonthDayInput } from '@symply.io/basic-components/DateInput'; 
// or 
import MonthDayInput from '@symply.io/basic-components/DateInput/MonthDayInput';

Name	Type	Default	Required	Description
error	boolean		false	If `true`, the label is displayed in an error state.
helperText	string		false	The helper text content.
margin	'dense' \| 'none' \| 'normal'	'none'	false	If `dense` or `normal`, will adjust vertical spacing of this and contained components.
name	string		false	Name attribute of the `input` element.
onBlur	func		false	Callback fired when the `input` is blurred. Notice that the first argument (event) might be undefined.
onChange	func		true	Callback fired when the `Input` value is changed.Signature:`function(value: string) => void`value: The value of the `Input` element.
onFocus	func		false	Callback fired when the `input` is focused.
onValidate	func		false	Customized validation function.
value	string		true	The value of the `Input` element.

Input component for month year (MM/YYYY)

import { MonthYearInput } from '@symply.io/basic-components/';
// or 
import { MonthYearInput } from '@symply.io/basic-components/DateInput'; 
// or 
import MonthYearInput from '@symply.io/basic-components/DateInput/MonthYearInput';

Name	Type	Default	Required	Description
error	boolean		false	If `true`, the label is displayed in an error state.
helperText	string		false	The helper text content.
margin	'dense' \| 'none' \| 'normal'	'none'	false	If `dense` or `normal`, will adjust vertical spacing of this and contained components.
name	string		false	Name attribute of the `input` element.
onBlur	func		false	Callback fired when the `input` is blurred. Notice that the first argument (event) might be undefined.
onChange	func		true	Callback fired when the `Input` value is changed.Signature:`function(value: string) => void`value: The value of the `Input` element.
onFocus	func		false	Callback fired when the `input` is focused.
onValidate	func		false	Customized validation function.
value	string		true	The value of the `Input` element.

Input component for digits.

It is extended from @mui/material/TextField, so it includes all properties of @mui/material/TextField.

import { DigitInput } from '@symply.io/basic-components/';
// or 
import DigitInput from '@symply.io/basic-components/DigitInput';

Name	Type	Default	Required	Description
endAdornment	node		false	An end adornment element for the `Input` element.
maxLength	number	999	false	The max length of the `Input` element you can type in.
minLength	number	0	false	The min length of the `Input` element you should type in.
onChange	func		true	Callback fired when the `Input` value is changed.Signature:`function(value: string) => void`value: The value of the `Input` element.
value	string		true	The value of the `Input` element.
tooltip	ReactNode		false	A tooltip for the `Input` element.

Input component for FEIN.

It is extended from @mui/material/TextField, so it includes all properties of @mui/material/TextField.

import { FeinInput } from '@symply.io/basic-components/';
// or 
import FeinInput from '@symply.io/basic-components/FeinInput';

Name	Type	Required	Description
onChange	func	true	Callback fired when the `Input` value is changed.Signature:`function(value: string) => void`value: The value of the `Input` element.
onValidate	func	false	Customized validation function.
value	string	true	The value of the `Input` element.

Radio Group allow the user to select one option from a set.

import { FormRadioGroup } from '@symply.io/basic-components/';
// or 
import FormRadioGroup from '@symply.io/basic-components/FormRadioGroup';

Name	Type	Default	Required	Description
disabled	bool	false	false	If `true`, the opiton would be disabled.
label	string		true	The label of the option.
value	string \| number \| bool		true	The value of the option.

It is extended from @mui/material/FormControl, so it includes all properties of @mui/material/FormControl.

Name	Type	Default	Required	Description
formLabel	string		false	The label of the `Radio` element.
helperText	ReactNode		false	A helper text for the `Radio` element.
onChange	func		true	Callback fired when the `Radio` value is changed.Signature:`function(value: string\|number\|boolean) => void`value: The value of the `Radio` element.
options	Array\<IRadioOption>		true	The radio options. See the Radio Option Props above.
radioLabelPlacement	'top' \| 'bottom' \| 'start' \| 'end'	'end'	false	The placement of the radio labe .
tooltip	ReactNode \| string		false	A tooltip for the `Radio` element.
value	string \| number \| bool		true	The value of the `Radio` element.

Selector components are used for collecting user provided information from a list of options.

// Simple Selector
import { SimpleSelector } from '@symply.io/basic-components/FormSelector';
// Multiple Selector 
import { MultipleSelector } from '@symply.io/basic-components/FormRadioGroup';

Name	Type	Default	Required	Description
disabled	bool	false	false	If `true`, the opiton would be disabled.
label	string		true	The label of the option.
value	T extends number \| string			The value of the option.

It is extended from @mui/material/FormControl, so it includes all properties of @mui/material/FormControl.

Name	Type	Default	Required	Description
helperText	string		false	The helper text of the `Select` element.
label	string		false	The label of `Select` element.
multiple	bool	false	false	If `true`, you can select more than 1 option.
options	Array\<IRadioOption>		true	The radio options. See the Selector Option Props above.
showHelperText	bool	false	false	If `true`, show the helper text.
tooltip	ReactNode		false	A tooltip for the `Select` element.

Name	Type	Default	Required	Description
onChange	func		true	Callback fired when the `Select` value is changed.Signature:`function(value: string \| number) => void`value: The value of the `Select` element.
value	T extends number \| string		true	The value of the `Select` element.

Name	Type	Default	Required	Description
onChange	func		true	Callback fired when the `Select` value is changed.Signature:`function(value: Array<number> \| Array<string>) => void`value: The value of the `Select` element.
showCheckmarks	bool	false	false	If `true` the option will be shown with a checkbox.
value	Array\<T extends number \| string>			The value of the `Select` element.

You can use it to add a hint/help paragraph.

import { HelpCaption } from '@symply.io/basic-components/';
// or 
import HelpCaption from '@symply.io/basic-components/HelpCaption';

Name	Type	Default	Required	Description
linkText	string		false	The text of the help link.
linkType	'WEBPAGE' \| 'VIDEO'	'WEBPAGE'	false	The type of the help link.
linkUrl	string		false	The url of the help link. If `undefined` then the help link would not be shown.
mainCaption	string		true	The primary text of the caption.
subCaption	string		false	The secondary text of the caption.

A modal for loading.

import { LoadingModal } from '@symply.io/basic-components/';
// or 
import LoadingModal from '@symply.io/basic-components/LoadingModal';

Name	Type	Default	Required	Description
direction	'column' \| 'column-reverse' \| 'column' \| 'column-reverse'	'column'	false	Defines the `flex-direction` style property. It is applied for all screen sizes.
open	bool	false	true	If `true`, the component is shown.
percent	number	0	false	The percent value of the progress.
text	string	'Loading...'	false	The prompt text of the component.
showProgess	boolean	false	false	If `true`, the percent of the progress is shown.

A button with menu options.

import { MenuButtonGroup } from '@symply.io/basic-components/';
// or 
import MenuButtonGroup from '@symply.io/basic-components/MenuButtonGroup';

Name	Type	Required	Description
buttonIcon	node	false	A start adornment of the button
buttonText	string	true	The text of the menu button
disabled	bool
onClick	func	true	Callback fired when the menu button click.Signature:`function(event: MouseEvent) => void`

Name	Type	Default	Required	Description
color	'primary' \|'secondary' \|'success' \|'error' \|'info' \|'warning'	'primary'	false	The main color of the component.
buttonText	string		true	The text of the main button.
size	'small' \| 'medium' \| 'large'		false	The size of the main button.
disabled	bool		false	If `true`, the button is disabled.
variant	'text' \|'contained' \|'outlined'	'outlined'	false	The variant of the main button.
buttons	Array\<ButtonItemProps>		true	Menu buttons. See the Menu Button Props above.

Input component for Number.

It is extended from @mui/material/TextField, so it includes all properties of @mui/material/TextField.

import { NumberInput } from '@symply.io/basic-components/';
// or 
import NumberInput from '@symply.io/basic-components/NumberInput';

Name	Type	Default	Required	Description
decimals	number	0	false	The max length of decimals, if `0` then no limit.
integerOnly	bool		false	If `true`, not allow to type a decimal value.
maxValue	number	2^53 − 1	false	The max value of the `Input` element you can type in.
minValue	number	−(2^53 − 1)	false	The min value of the `Input` element you should type in.
onChange	func		true	Callback fired when the `Input` value is changed.Signature:`function(value: string) => void`value: The value of the `Input` element.
tooltip	ReactNode		false	A tooltip for the `Input` element.
value	string		true	The value of the `Input` element.

Input component for Password and Confirm Password.

It is extended from @mui/material/TextField, so it includes all properties of @mui/material/TextField.

// Password
import Password from '@symply.io/basic-components/PasswordInput';
// Confirm Password 
import ConfirmPassword from '@symply.io/basic-components/ConfirmPasswordInput';

Name	Type	Default	Required	Description
onChange	func		true	Callback fired when the `Input` value is changed.Signature:`function(value: string) => void`value: The value of the `Input` element.
onValidate	func		false	Customized verify function when the `Input` value is changed.Signature:`function(value: string) => void`value: The value of the `Input` element.
strategies	{ key: string: { label: string, regex: RegExp }}	{uppercaseLetter: { label: "1 Uppercase Letter", regex: /A-Z+/ },lowercaseLetter: { label: "1 Lowercase Letter", regex: /a-z+/ },specialCharacter: { label: "1 Special Character", regex: /[!"#$%&'()*+,-./:;<=>?@]^_`{}~/ },number: { label: "1 Number", regex: /\d+/ },minimum8: { label: "Minimum 8 characters", regex: /.{8,}/ }} \| false \| The strategies of the password
successColor	Color	'green'	false	The color of component when success.
value	string		true	The password value.

Name	Type	Required	Description
onChange	func	true	Callback fired when the `Input` value is changed.Signature:`function(value: string) => void`value: The value of the `Input` element.
password	string	true	The password value
value	string	true	The confirm password value.

Input component for US phone number.

It is extended from @mui/material/TextField, so it includes all properties of @mui/material/TextField.

import { PhoneNumberInput } from '@symply.io/basic-components/';
// or 
import PhoneNumberInput from '@symply.io/basic-components/PhoneNumberInput';

Name	Type	Required	Description
endAdornment	node	false	An end adornment element for the `Input` element.
onChange	func	true	Callback fired when the `Input` value is changed.Signature:`function(value: string) => void`value: The value of the `Input` element.
onValidate	func	false	Customized validation function.
value	string	true	The value of the `Input` element.

Sidebars for navigation.

import { Sidebar } from '@symply.io/basic-components/';
// or 
import Sidebar from '@symply.io/basic-components/Sidebar';

Name	Type	Default	Required	Description
badge	number		false	The badge will be rendered for notifications.
beta	boolean		false	If `true` the beta tag will be rendered.
betaTagColor	CSSProperties"color"	#00A2A9	false	The value of the `Input` element.
children	Array\<SidebarItemProps>		false	If not undefined the sub sidebar items would be rendered.
icon	Element		true	The icon adornment.
lock	boolean		false	If `true` the lock icon will be rendered, and the sidebar item would be disabled.
name	string		true	The sidebar item label.
path	string		true	The link path of the sidebar item.
titleForLock	string	"Feature is unavailable on Free plan"	false	The tip when the lock is `true`

Name	Type	Default	Required	Description
items	Array\<SidebarItemProps>		true	Sidebar items.
showIconOnly	boolean	false	false	If `true` it will show the main icon only.

Input component for Social Security Number (SSN).

It is extended from @mui/material/TextField, so it includes all properties of @mui/material/TextField.

import { SocialInput } from '@symply.io/basic-components/';
// or 
import SocialInput from '@symply.io/basic-components/SocialInput';

Name	Type	Required	Description
onChange	func	true	Callback fired when the `Input` value is changed.Signature:`function(value: string) => void`value: The value of the `Input` element.
onValidate	func	false	Customized validation function.
value	string	true	The value of the `Input` element.

Tabs group.

It is extended from @mui/material/Tabs, so it includes all properties of @mui/material/Tabs.

import { TabGroup } from '@symply.io/basic-components/';
// or 
import TabGroup from '@symply.io/basic-components/TabGroup';

Name	Type	Default	Required	Description
currentTabIndex	number	0	true	the tab index from the higher component
onChange	func	If `onChange` is undefined and the `url` of tab is defined, we will navigate to that url when the tab changed	false	Callback fired when the `Tab` is changed.Signature:`function(args: {tabIndex: number; url?: string}) => void`tabIndex: The selected index of the `Tab` element.url: The url for navigating.
tabs	Array\<{ key: string; text: string; url?: string; disabled?: boolean }>		true	All tab items.
variant	'standard' \| 'scrollable' \| 'fullWidth'	'scrollable'	false	Determines additional display behavior of the tabs

Reusable pagination component for the material table

import { TablePagination } from '@symply.io/basic-components/';
// or 
import TablePagination from '@symply.io/basic-components/TablePagination';

Name	Type	Required	Description
colSpan	number	false	The number of columns a cell should span.
count	number	true	The total count of all data.
onPageChange	func	true	Callback fired when the `page` value is changed.Signature:`function(event: MouseEvent<HTMLButtonElement> ) => void,value: number`value: The value of the `page` .
onRowsPerPageChange	func	true	Callback fired when the `Select` value is changed.Signature:`function(event: ChangeEvent<HTMLInputElement`
page	number	true	The current page index.
rowsPerPage	number	true	How many rows per page.
rowsPerPageOptions	Array\<number>	true	The options for setting how many rows per page.

Regular Input component.

It is extended from @mui/material/TextField, so it includes all properties of @mui/material/TextField.

import { TextInput } from '@symply.io/basic-components/';
// or 
import TextInput from '@symply.io/basic-components/TextInput';

Name	Type	Default	Required	Description
maxLength	number	999	false	The max length of the `Input` element you can type in.
minLength	number	0	false	The min length of the `Input` element you should type in.
onChange	func		true	Callback fired when the `Input` value is changed.Signature:`function(value: string) => void`value: The value of the `Input` element.
tooltip	ReactNode		false	A tooltip for the `Input` element.
value	string		true	The value of the `Input` element.

Global prompt component.

import { usePrompt } from '@symply.io/basic-components';

Name	Type	Default	Required	Description
message	string \| 400		true	The prompt message you want to show.
timeout	number	3500	false	The number of milliseconds to wait before automatically calling the `onClose` function.
type	'success' \| 'warning' \| 'info' \| 'error'		true	The type of prompt.

A modal for playing videos.

import { VideoPlayerModal } from '@symply.io/basic-components/';
// or
import VideoPlayerModal from '@symply.io/basic-components/VideoPlayerModal';

Name	Type	Required	Description
extraButtons	Array\<ButtonProps>	false	Extra buttons next to the Close button at the bottom.
onClose	func	true	Callback fired when the cancel button requests to be clicked.Signature:`function() => void`
open	bool	true	If `true`, the component is shown.
pip	bool	false	If `true`, the video can be played in picture
title	string	false	Modal title, it would be shown at the top left.

Reusable data table component with virtualizer

import { VirtualDataTable } from '@symply.io/basic-components';
// or 
import VirtualDataTable from '@symply.io/basic-components/VirtualDataTable';

Name	Type	Required	Description
accessor	string	true	The key of the column, it should be unique.
align	"left" \|"center" \|"right"	false	The alignment of the column.
Body	ReactElement	true	The component to render the column body cell.
fixable	"left" \| "right" \|undefined	false	If not undefined, the column can be frozen. ⚠️ It doesn't work with IE11.
Footer	ReactElement	false	The component to render the column footer cell.
Header	ReactElement	true	The component to render the column header cell.
headerTip	string	false	The tip title text when the mouse is over the header.
sortable	bool	false	If true, the column can be sortable.
width	number	false	The fixed width of cells.

Name	Type	Default	Required	Description
accessor	string		true	The key of the column.
order	"ASC" \| "DESC" \| "NONE"		true	The sorting order.

Name	Type	Default	Required	Description
aux	{name:string: any}		false	Extra properties
columns	Array	[]	true	Table columns
dense	bool		false	If `true` the table size/density would be tight.
footerBgColor	CSSProperties"color"		false	Customized footer background color.
footerTextColor	CSSProperties"color"		false	Customized footer text color.

headerBgColor	CSSProperties"color"		false	Customized header background color.
headerTextColor	CSSProperties"color"		false	Customized header text color.
initialState	{ sortBy?: SortingProps}		false	Set the initial states
noDataText	string	'No Data!'	false	The text when no data rendered.
onContextMenu	func		false	The function for row right-clicking.Signature:`function(event: MouseEvent, row: RowProps) => unknown`
onCustomizeRowBgColor	func		false	The function for customizing the row background color.Signature:`function(props: {row: RowProps, columns: Array\<ColumnProps\>}) => {normal?: HexColor;<br/> hover?: HexColor;<br/>}`
onRowClick	func		false	The function for row clicking.Signature:`function(row: RowProps) => unknown`
onSort	func		false	The function for sorting rows.Signature:`function(props: SortingProps) => unknown`
rows	Array<{ name: unknown }>		true	table data/rows
sortingDisabled	bool		false	If true, the whole table can't be sortable.

If you have recently updated, please read the changelog for details of what has changed.

react react-component material-ui

@emotion/react @emotion/styled @mui/icons-material @mui/material @mui/system @reach/router color-alpha react-dropzone react-player react-virtuoso rifm

@infinitebrahmanuniverse/nolb-_sym @everything-registry/sub-chunk-889 @zalastax/nolb-_sym

8 months ago

10 months ago

11 months ago

10 months ago

10 months ago

8 months ago

8 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

12 months ago

12 months ago

12 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

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years 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

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

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

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

2 years ago

3 years ago

3 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

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 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

3 years ago

3 years ago

3 years ago

3 years ago

2 years ago

3 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago