@symply.io/basic-components

Symply Basic Components

Basic and reusable components for all frontend of Symply apps.

Built with Material UI v5.

---

Quick Guide

• Installation
• License
• Components
  • AlertDialog
  • Autocomplete
  • AutocompleteWithFilter
  • BasicModal
  • BreadCrumbs
  • CheckBox
  • CheckBoxGroup
  • CliickableFabButton
  • Copyright
  • DataTable
  • DateInput
    • FullDateInput
    • MonthDayInput
    • MonthYearInput
  • DigitInput
  • FeinInput
  • FormRadioGroup
  • FormSelector
  • HelpCaption
  • LoadingModal
  • MenuButtonGroup
  • NumberInput
  • PasswordInput
  • PhoneNumberInput
  • Sidebar
  • SocialInput
  • TabGroup
  • TablePagination
  • TextInput
  • ToastPrompt
  • VideoPlayerModal
• Changelog

Installation

It is available as an npm package.

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

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

License

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

Common Properties

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

Components

AlertDialog

Diglog component for alerts or confirmations.

Import

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

Props

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

Autocomplete

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

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

Option Props (IOption)

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

Props

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
options	Array<IOption|string>		true	Array of suggestion options.
value	string		true	The value of the Input element.

AutocompleteWithFilter

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

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

Option Props (IOption)

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

Props

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
options	Array<IOption|string>		true	Array of suggestion options.
value	string		true	The value of the Input element.

BasicModal

Reusable modal component.

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

Import

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

Props

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.

BreadCrumbs

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

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

Props

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

CheckBox

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

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

Props

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.

CheckBoxGroup

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

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

Props

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

ClickableFabButton

A fab button with icon and text

Import

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

Props

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.

Copyright

A common component for rendering the copyright

Import

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

DataTable

Reusable table component

Import

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

Column Props (ColumnProps)

Name	Type	Default	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.

Sorting Props

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

Hook Props

Name	Type	Default	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

Hook Returns

Name	Type	Description
columns	Array<TableBodyCellProps>	The cells for the body.
footers	Array<TableFooterCellProps>	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.

Component Props

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<TableFooterCellProps>	[]	false	The cells for the footer. (from the hook)
headers	Array<TableHeaderCellProps>		true	The cells for the header. (from the hook)
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)
stickyHeader	bool		false	Set the header sticky. ⚠️ It doesn't work with IE11.

DateInput

FullDateInput

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

Import

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'; 

Props

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.

MonthDayInput

Input component for month day (MM/DD)

Import

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'; 

Props

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.

MonthYearInput

Input component for month year (MM/YYYY)

Import

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'; 

Props

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.

DigitInput

Input component for digits.

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

Import

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

Props

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	string		false	A tooltip for the Input element.

FeinInput

Input component for FEIN.

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

Import

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

Props

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 validation function.
value	string		true	The value of the Input element.

FormRadioGroup

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

Import

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

Radio Option Props

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.

Props

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.
onChange	func		true	Callback fired when the Radio value is changed. Signature: `function(value: string
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	string		false	A tooltip for the Radio element.
value	string | number | bool		true	The value of the Radio element.

FormSelector

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

Import

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

Selector Option Props

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.

Base Props

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	string		false	A tooltip for the Select element.

Simple Selector Props

Extended from the Base Props

Name	Type	Default	Required	Description
onChange	func		true	Callback fired when the Select value is changed. Signature: `function(value: string
value	number | string		True	The value of the Select element.

Multiple Selector Props

Extended from the Base Props

Name	Type	Default	Required	Description
onChange	func		true	Callback fired when the Select value is changed. Signature: `function(value: Array
value	Array<number> | Array<string>			The value of the Select element.

HelpCaption

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

Import

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

Props

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.

LoadingModal

A modal for loading.

Import

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

Props

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.

MenuButtonGroup

A button with menu options.

Import

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

Menu Button Props

Name	Type	Default	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

Props

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.

NumberInput

Input component for Number.

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

Import

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

Props

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	string		false	A tooltip for the Input element.
value	string		true	The value of the Input element.

PasswordInput

Input component for Password and Confirm Password.

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

Import

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

Password Props

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.

Confirm Password Props

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.
password	string		true	The password value
value	string		true	The confirm password value.

PhoneNumberInput

Input component for US phone number.

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

Import

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

Props

Name	Type	Default	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.

Sidebar

Sidebars for navigation.

Import

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

Sidebar Item Props

Name	Type	Default	Required	Description
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

Props

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

SocialInput

Input component for Social Security Number (SSN).

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

Import

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

Props

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 validation function.
value	string		true	The value of the Input element.

TabGroup

Tabs group.

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

Import

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

Props

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

TablePagination

Reusable pagination component for the material table

Import

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

Props

Name	Type	Default	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.

TextInput

Regular Input component.

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

Import

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

Props

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	string		false	A tooltip for the Input element.
value	string		true	The value of the Input element.

ToastPrompt

Global prompt component.

Import

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

Usage

```typescript const { showPrompt } = usePrompt(); ```

Props

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.

VideoPlayerModal

A modal for playing videos.

Import

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

Props

Name	Type	Default	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.

Changelog

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