@symply.io/basic-components

v1.8.0

Published

17 days ago

Basic and reusable components for all frontend of Symply apps

Downloads

634

0High
0Medium
0Low

jaketompkins

symply_jake

jandenma

react react-component material-ui

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 | Default | 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) => voidvalue: 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 | 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) => voidvalue: 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 | ----------------------- | cancelButtonColor | cancelText | string | children | node | color | desc | string | disabled | bool | hideBottomButtons | bool | loading | bool | maxWidth | noForm | bool | onClose | func | onSubmit | func | open | bool | ref | ref | scroll | submitButtonColor | submitText | string | showTopRightCloseButton | bool | title | string | Default | Required | Description | | ------------------------------------------------------------ | ------------------- | -------- | ------------------------------------------------------------ | | 'primary' | 'secondary' | 'success' | 'error' | 'info' | 'warning' | undefined | same as the color | false | The color of the cancel button. | | 'Cancel' | false | The text of the cancel button. | | | true | The content of the component. | | 'primary' | 'secondary' | 'success' | 'error' | 'info' | 'warning' | undefined | 'primary' | false | The main color of the component. | | | false | Some descriptions you want to add, similar to a subtitle. | | false | false | If true, the submit button would be disabled. | | false | false | If true, hide all action buttons at the bottom of the modal. | | false | false | If true, the submit and cancel buttons would be disabled. | | '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. | | false | False | If true, put the content and action buttons out of a form element. | | | true | Callback fired when the cancel button requests to be clicked.Signature:function() => void | | | true | Callback fired when the submit button requests to be clicked.Signature:function() => void | | false | true | If true, the component is shown. | | | false | You can get the form "onSubmit" function from the ref. | | 'body' | 'paper' | 'paper' | false | Determine the container for scrolling the dialog. | | 'primary' | 'secondary' | 'success' | 'error' | 'info' | 'warning' | undefined | same as the color | false | The color of the submit button. | | ‘Save’ | false | The text of the submit button. | | false | false | If true, show a close icon button at the top right of the modal. | | | 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) => voidvalue: 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 | 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. |

| 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 | | ------------- | -------------------------- | ------- | -------- | ------------------------------------------------------------ | | 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<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. |

| 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) | | 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) => voidvalue: 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';

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

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) => voidvalue: 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 | Default | Required | Description | | ---------- | ------ | ------- | -------- | ------------------------------------------------------------ | | onChange | func | | true | Callback fired when the Input value is changed.Signature:function(value: string) => voidvalue: 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) => voidvalue: 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) => voidvalue: 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>) => voidvalue: 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 | 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 |

| 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) => voidvalue: 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) => voidvalue: The value of the Input element. | | onValidate | func | | false | Customized verify function when the Input value is changed.Signature:function(value: string) => voidvalue: 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 | Default | Required | Description | | -------- | ------ | ------- | -------- | ------------------------------------------------------------ | | onChange | func | | true | Callback fired when the Input value is changed.Signature:function(value: string) => voidvalue: 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 | 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) => voidvalue: 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';

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}) => voidtabIndex: 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 | 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: numbervalue: 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) => voidvalue: 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. | | action | ReactNode | null | | false | Customized button(s) at the end of the prompt. If this property is set, the default close icon button will be replaced directly. |

A modal for playing videos.

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

| 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. |

Reusable data table component with virtualizer

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

| 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 | | maxHeight | number | | false | The max height (px) of the table container. | | 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. | | visibleRows | Array<{ [name]: unknown }> | same as rows | false | The table will only display these rows, and it won't affect the table data, especially some totals in the footer (if you defined them). |

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

Pkg
Stats

Discover Tips

General search

Package details

User packages

Sponsor

About

Twitter

GitHub

Twitter

GitHub

Site

Open Software & Tools

Framework

Server

Data Store

Caching

CSS / Styling

Typeface

Avatars

Data Viz

Date formatting

Infinite scrolling

Markdown rendering

Repository url parsing

User data

Compiling

Types

Odds & Ends

@symply.io/basic-components

v1.8.0

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme