# asayyex-ui > --- Latest version **1.0.16** (published 2023-06-01) · MIT license · 0 weekly downloads ## Install ```sh npm install asayyex-ui pnpm add asayyex-ui yarn add asayyex-ui bun add asayyex-ui ``` ## Health **Score 25/100 (F)** — status: abandoned. Positive: has types; esm support; no vulnerabilities. Warnings: low downloads. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.0.16 | | Published | 2023-06-01 | | First published | 2023-05-21 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 0 | | Unpacked size | 275.3 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 0 | | Author | Aasim Sayyed | | Maintainers | asayyex | | Keywords | react, ui, design-system, react-components, uikit, accessible, components, emotion, library, design-system | ## Links - npm: https://www.npmjs.com/package/asayyex-ui - Repository: https://github.com/riviangeralt/asayyex-ui - Issues: https://github.com/riviangeralt/asayyex-ui/issues - npm.io page: https://npm.io/package/asayyex-ui ## Alternatives - [@progress/kendo-ooxml](https://npm.io/package/@progress/kendo-ooxml.md) — 152.1K weekly downloads - [@progress/kendo-react-ripple](https://npm.io/package/@progress/kendo-react-ripple.md) — 8.0K weekly downloads - [@progress/kendo-react-orgchart](https://npm.io/package/@progress/kendo-react-orgchart.md) — 4.3K weekly downloads - [@praxisui/dynamic-fields](https://npm.io/package/@praxisui/dynamic-fields.md) — 2.4K weekly downloads - [@mesalvo/react-ui](https://npm.io/package/@mesalvo/react-ui.md) — 1.7K weekly downloads ## Recent versions - 1.0.16 (latest) — 2023-06-01 - 1.0.15 — 2023-06-01 - 1.0.14 — 2023-06-01 - 1.0.13 — 2023-06-01 - 1.0.12 — 2023-05-24 - 1.0.11 — 2023-05-21 - 1.0.10 — 2023-05-21 - 1.0.9 — 2023-05-21 - 1.0.8 — 2023-05-21 - 1.0.7 — 2023-05-21 - 1.0.6 — 2023-05-21 - 1.0.5 — 2023-05-21 - 1.0.4 — 2023-05-21 - 1.0.3 — 2023-05-21 - 1.0.2 — 2023-05-21 - … 2 more at https://npm.io/package/asayyex-ui/versions ## README # Asayyex UI --- This library contains components require to build a beautiful React App faster and better. We are planning to include components that are not available in the current UI Libraries. ### Installation **npm:** ```sh npm install asayyex-ui ``` **yarn:** ```sh yarn add asayyex-ui ``` --- ### Getting started with Asayyex UI Here is an example of a basic app using Asayyex UI's `Button` component: ```jsx import React from 'react'; import { Button } from 'asayyex-ui'; function App() { return ; } ``` Try changing the variant to `outlined`. --- ### Components Available All the available components are listed down here. If you don't see any component you want. Don't worry we are working on it. 1. [Accordion](#accordion) 2. [Button](#button) 3. [Checkbox](#checkbox) 4. [Chip](#chip) 5. [DatePicker](#datepicker) 6. [Drawer](#drawer) 7. [drawer](#drawer) 8. [Select](#select) 9. [Spinner](#spinner) 10. [Switch](#switch) 11. [TextField](#textfield) 12. [TimePicker](#timepicker) --- ### Accordion Here is an example of `Accordion` ```jsx import React from 'react'; import { Accordion } from 'asayyex-ui'; function App() { return Accordion body ; } ``` #### Available Props | Prop | Type | Description | Default | | ----------- | ----------- | ----------- | ----------- | | title | `string` | The title of the accordion component. | `null` | | isDisabled | `bool` | Indicates whether the accordion is disabled or not. | `false` | | isOpen | `bool` | Indicates whether the accordion is open or not. Used to control the accordion manually. | `null` | | onChange | `func` | It is used when you want to control the accordion from external state. | `undefined` | --- ### Button Here is an example of `Button` ```jsx import React from 'react'; import { Button } from 'asayyex-ui'; function App() { return ; } ``` #### Available Props | Prop | Type | Description | Default | | ----------- | ----------- | ----------- | ----------- | | variant | `'contained' \| 'outlined' \| 'link' \| 'danger' \| 'success' \| 'warning'` | To enable the clicking ripple effect. | `contained` | | ripple | `bool` | To enable the clicking ripple effect. | `false` | | isDisabled | `bool` | Indicates whether the button is disabled or not. | `false` | | size | `'sm' \| 'md' \| 'lg'` | Indicates the size of the button. | `md` | | isLoading | `bool` | Indicates whether the button is in the loading state or not. | `false` | --- ### Checkbox Here is an example of `Checkbox`: ```jsx import React from 'react'; import { Checkbox } from 'asayyex-ui'; function App() { const handleCheckChange = (event) => { console.log('Checkbox checked:', event.target.checked); }; return (
); } ``` #### Available Props | Prop | Type | Description | Default | | ----------------- | ---------------------------------------------------------- | ------------------------------------------------------------------ | --------- | | label | string | The label text associated with the checkbox | - | | size | 'sm' | 'md' | 'lg' | Specifies the size of the checkbox | undefined | | onCheckChange | (event: React.ChangeEvent) => void | Callback function triggered when the checkbox value changes | - | | defaultChecked | boolean | Specifies whether the checkbox is checked by default | false | | isDisabled | boolean | Indicates whether the checkbox is disabled | false | | isChecked | boolean | Specifies whether the checkbox is checked | false | | error | boolean | Indicates whether there is an error with the checkbox | false | | name | string | The name attribute of the checkbox | - | --- ### Chip Here is an example of `Chip`: ```jsx import React from 'react'; import { Chip } from 'asayyex-ui'; function App() { const handleDelete = (event) => { console.log('Chip deleted:', event); }; return ( } avatar={} title="Example Chip" isClickable={true} /> ); } ``` #### Available Props | Prop | Type | Description | | ------------- | --------------------------------------------------------------------------------- | ------------------------------------------------------------------- | | size | 'sm' | 'md' | 'lg' | Specifies the size of the chip | | variant | 'contained' | 'outlined' | Specifies the variant of the chip | | onDelete | (event: React.MouseEvent) => void | undefined | Callback function triggered when the delete icon is clicked | | deleteIcon | React.ReactNode | Custom delete icon to be displayed | | avatar | React.ReactNode | Avatar element to be displayed on the left side of the chip | | title | string | The title text to be displayed inside the chip | | isClickable | boolean | Indicates whether the chip is clickable | --- ### DatePicker Here is an example of `DatePicker` ```jsx import React from 'react'; import { DatePicker } from 'asayyex-ui'; function App() { const handleDateChange = (date) => { console.log('Selected date:', date); }; return (
); } export default App; ``` #### Available Props | Prop | Type | Description | Default | | ------------------ | ------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------- | --------- | | size | 'sm' | 'md' | 'lg' | undefined | Specifies the size of the date picker input | undefined | | isDisabled | boolean | Indicates whether the date picker input is disabled | false | | error | boolean | Indicates whether there is an error with the date picker input | false | | value | Date | string | undefined | The value of the date picker input | undefined | | onDateChange | (date: Date) => void | Callback function triggered when the date value changes | - | | placeholder | string | The placeholder text for the date picker input | - | | dateFormat | 'DD/MM/YYYY' | 'MM/DD/YYYY' | 'YYYY/MM/DD' | 'DD-MM-YYYY' | 'MM-DD-YYYY' | 'YYYY-MM-DD' | 'DD MMM YYYY' | 'YYYY MMM DD' | 'MMM DD, YYYY' | The format of the displayed date value | 'DD/MM/YYYY' | | name | string | The name attribute of the date picker input | - | | label | string | The label text associated with the date picker input | - | | errorMsg | string | The error message to display when there is an error with the date picker input | - | | description | string | The description text for the date picker input | - | | wrapperClassName | string | Additional class name for the wrapper element | - | | labelClassName | string | Additional class name for the label element | - | | inputClassName | string | Additional class name for the input element | - | | iconClassName | string | Additional class name for the icon element | - | | errorClassName | string | Additional class name for the error element | - | | wrapperStyle | React.CSSProperties | Additional inline styles for the wrapper element | - | | labelStyle | React.CSSProperties | Additional inline styles for the label element | - | | inputStyle | React.CSSProperties | Additional inline styles for the input element | - | | iconStyle | React.CSSProperties | Additional inline styles for the icon element | - | | errorStyle | React.CSSProperties | Additional inline styles for the error element | - | | minDate | Date | The minimum selectable date in the date picker | - | | maxDate | Date | The maximum selectable date in the date picker | - | - | --- ### Drawer Here is an example of `Drawer`: ```jsx import React, { useState } from 'react'; import { Drawer } from 'asayyex-ui'; function App() { const [open, setOpen] = useState(false); const handleClose = () => { setOpen(false); }; return (

Drawer Content
); } ``` #### Available Props | Prop | Type | Description | | --------------------- | ------------------------ | ------------------------------------------------------------------------------ | | open | boolean | Indicates whether the drawer is open or closed. | | onClose | () => void | Callback function to be executed when the drawer is closed. | | children | React.ReactNode | Content to be displayed within the drawer. | | closeOnOverlayClick | boolean | Indicates whether the drawer should be closed when clicking outside the drawer. | | size | 'sm' | 'md' | 'lg' | Specifies the size of the drawer. | | position | 'top' | 'bottom' | 'right' | 'left' | Specifies the position of the drawer. | | title | string | React.ReactNode | Title text or custom element to be displayed in the drawer header. | | footer | React.ReactNode | Content to be displayed in the drawer footer. | --- ### TextField Here is an example of `TextField` ```jsx import React from 'react'; import { TextField } from 'asayyex-ui'; function App() { return ( } rightIcon={} wrapperClassName="text-field-wrapper" labelClassName="label" inputClassName="input" iconClassName="icon" errorClassName="error" wrapperStyle={{ marginBottom: '10px' }} labelStyle={{ color: 'blue' }} inputStyle={{ border: '1px solid black' }} iconStyle={{ fontSize: '20px' }} errorStyle={{ color: 'red' }} /> ); } export default App; ``` #### Available Props | Prop | Type | Description | Default | | ------------------ | ----------------------- | ------------------------------------------------ | ---------- | | size | 'sm' | 'md' | 'lg' | undefined | Specifies the size of the input field | undefined | | isDisabled | boolean | Indicates whether the input field is disabled | false | | leftIcon | React.ReactNode | The icon to be displayed on the left side | undefined | | rightIcon | React.ReactNode | The icon to be displayed on the right side | undefined | | error | boolean | Indicates whether there is an error with the input| false | | label | string | The label text associated with the input field | undefined | | wrapperClassName | string | Additional class name for the wrapper element | undefined | | labelClassName | string | Additional class name for the label element | undefined | | inputClassName | string | Additional class name for the input element | undefined | | iconClassName | string | Additional class name for the icon elements | undefined | | errorClassName | string | Additional class name for the error element | undefined | | wrapperStyle | React.CSSProperties | Additional inline styles for the wrapper element | undefined | | labelStyle | React.CSSProperties | Additional inline styles for the label element | undefined | | inputStyle | React.CSSProperties | Additional inline styles for the input element | undefined | | iconStyle | React.CSSProperties | Additional inline styles for the icon elements | undefined | | errorStyle | React.CSSProperties | Additional inline styles for the error element | undefined | --- ### TimePicker Here is an example of `TimePicker` ```jsx import React from 'react'; import { TimePicker } from 'asayyex-ui'; function App() { const handleTimeChange = (time) => { console.log('Selected time:', time); }; return (
); } export default App; ``` #### Available Props | Prop | Type | Description | Default | | ------------------ | ----------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------- | --------- | | size | 'sm' | 'md' | 'lg' | undefined | Specifies the size of the time picker input | undefined | | isDisabled | boolean | Indicates whether the time picker input is disabled | false | | error | boolean | Indicates whether there is an error with the time picker input | false | | value | string | undefined | The value of the time picker input | undefined | | onTimeChange | (time: string | undefined) => void | Callback function triggered when the time value changes | - | | placeholder | string | The placeholder text for the time picker input | - | | timeFormat | 'hh:mm A' | 'HH:mm' | 'HH:mm A' | 'hh:mm' | 'hh:mm:ss A' | 'hh:mm:ss' | 'HH:mm:ss A' | 'HH:mm:ss' | The format of the displayed time value | 'hh:mm A' | | name | string | The name attribute of the time picker input | - | | is24Hours | boolean | Indicates whether to use the 24-hour format instead of the AM/PM format | false | | label | string | The label text associated with the time picker input | - | | errorMsg | string | The error message to display when there is an error with the time picker input | - | | description | string | The description text for the time picker input | - | | wrapperClassName | string | Additional class name for the wrapper element | - | | labelClassName | string | Additional class name for the label element | - | | inputClassName | string | Additional class name for the input element | - | | iconClassName | string | Additional class name for the icon element | - | | errorClassName | string | Additional class name for the error element | - | | wrapperStyle | React.CSSProperties | Additional inline styles for the wrapper element | - | | labelStyle | React.CSSProperties | Additional inline styles for the label element | - | | inputStyle | React.CSSProperties | Additional inline styles for the input element | - | | iconStyle | React.CSSProperties | Additional inline styles for the icon element | - | | errorStyle | React.CSSProperties | Additional inline styles for the error element | - | --- --- _Source: https://npm.io/package/asayyex-ui · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._