sndq-custom-component

Custom and reusable components for react native

Installation

Using NPM

    npm install sndq-custom-component

Or using Yarn

    yarn add sndq-custom-component

Usage

import { Avatar } from 'sndq-custom-component';
// ...
<Avatar imgURL={''} size={'large'} userName={'Bill Edward'} />;

Avatar

| Prop | Description | Required | Type | Default | | -------------- | ---------------------- | ------------------ | ------ | --------- | | imgURL | Image source of Avatar | :white_check_mark: | string | undefined | | userName | Name of the user | :white_check_mark: | string | undefined | | size | Size of Avatar | :white_check_mark: | string | undefined |

TextArea

| Prop | Description | Required | Type | Default | | ------------------ | ---------------------------- | ------------------ | -------------------------------------------- | --------- | | inputText | Value of TextArea | :white_check_mark: | string | undefined | | setInputText | SetState actions of TextArea | :white_check_mark: | React.Dispatch<React.SetStateAction> | undefined |

Button

| Prop | Description | Required | Type | Default | | ----------------- | ------------------ | -------------------- | ------------------- | --------- | | colorSwatch | Swatch type | :white_check_mark: | string | undefined | | size | Size of the button | :white_check_mark: | string | undefined | | title | Button title | :white_large_square: | string | undefined | | disabled | Button disable | :white_large_square: | boolean | true | | leftIcon | Button left icon | :white_large_square: | ImageSourcePropType | undefined | | rightIcon | Button right icon | :white_large_square: | ImageSourcePropType | undefined |

Input

| Prop | Description | Required | Type | Default | | -------------------------- | ----------------------------------- | -------------------- | -------------------------------------------- | --------- | | onChange | value change | :white_large_square: | function | void | | enable | editable | :white_large_square: | boolean | true | | text | value input | :white_large_square: | string | undefined | | setText | set value of input | :white_large_square: | React.Dispatch<React.SetStateAction> | undefined | | cursorColor | cursor color | :white_large_square: | string | undefined | | placeHolderText | place holder text input | :white_large_square: | string | undefined | | keyboardMode | mode of the keyboard | :white_large_square: | KeyboardTypeOptions | undefined | | multiLineText | Enable multi lines | :white_large_square: | boolean | false | | isPassword | Enable show character with password | :white_large_square: | boolean | false | | showPassword | Function show and hide password | :white_large_square: | function | void | | hidePassword | Hide password | :white_large_square: | boolean | false | | lines | number of lines | :white_large_square: | number | undefined | | maxTextLength | Length of text | :white_large_square: | number | undefined | | placeholderTextColor | color of placeholder text | :white_large_square: | ColorValue | undefined | | label | input label | :white_large_square: | string | undefined | | validateType | Message validate type | :white_large_square: | string | undefined | | validateMsg | Message validate | :white_large_square: | string | undefined | | setValidateMsg | Set message validation | :white_large_square: | any | undefined | | extraPrefix | extra prefix | :white_large_square: | boolean | false | | extraSuffix | extra suffix | :white_large_square: | boolean | false |

Checkbox

| Prop | Description | Required | Type | Default | | --------------------- | ------------------ | -------------------- | ------- | --------- | | status | status of checkbox | :white_large_square: | number | undefined | | checkBoxLabel | Label of checkbox | :white_large_square: | string | undefined | | checkBoxDisable | Checkbox disable | :white_large_square: | boolean | false |

SingleSelect

| Prop | Description | Required | Type | Default | | -------------------------- | ------------------------- | -------------------- | --------------------------------------------- | --------- | | title | Title of single selection | :white_check_mark: | string | undefined | | data | List item selection | :white_check_mark: | Array | undefined | | cancelTitle | Title button cancel | :white_check_mark: | string | 'Cancel' | | confirmTitle | Title button confirm | :white_check_mark: | string | 'Confirm' | | modalVisible | status bottom sheet | :white_check_mark: | boolean | false | | setItemSelectedValue | set item value selected | :white_check_mark: | React.Dispatch<React.SetStateAction> | undefined | | itemSelectedValue | item of data selected | :white_check_mark: | any | undefined | | setModalVisible | set modal show or hide | :white_check_mark: | React.Dispatch<React.SetStateAction> | undefined | | onPressCancel | on press cancel button | :white_large_square: | function | void | | onPressConfirm | on press confirm button | :white_large_square: | function | void |

Chip

Container

InfoBar

Message

Switch

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

Made with create-react-native-library