Custom and reusable components for react native
Using NPM
npm install sndq-custom-component
Or using Yarn
yarn add sndq-custom-component
import { Avatar } from 'sndq-custom-component';
// ...
<Avatar imgURL={''} size={'large'} userName={'Bill Edward'} />;| Prop | Description | Required | Type | Default |
|---|---|---|---|---|
imgURL |
Image source of Avatar | ✅ | string | undefined |
userName |
Name of the user | ✅ | string | undefined |
size |
Size of Avatar | ✅ | string | undefined |
| Prop | Description | Required | Type | Default |
|---|---|---|---|---|
inputText |
Value of TextArea | ✅ | string | undefined |
setInputText |
SetState actions of TextArea | ✅ | React.Dispatch<React.SetStateAction> | undefined |
| Prop | Description | Required | Type | Default |
|---|---|---|---|---|
colorSwatch |
Swatch type | ✅ | string | undefined |
size |
Size of the button | ✅ | string | undefined |
title |
Button title | ⬜ | string | undefined |
disabled |
Button disable | ⬜ | boolean | true |
leftIcon |
Button left icon | ⬜ | ImageSourcePropType | undefined |
rightIcon |
Button right icon | ⬜ | ImageSourcePropType | undefined |
| Prop | Description | Required | Type | Default |
|---|---|---|---|---|
onChange |
value change | ⬜ | function | void |
enable |
editable | ⬜ | boolean | true |
text |
value input | ⬜ | string | undefined |
setText |
set value of input | ⬜ | React.Dispatch<React.SetStateAction> | undefined |
cursorColor |
cursor color | ⬜ | string | undefined |
placeHolderText |
place holder text input | ⬜ | string | undefined |
keyboardMode |
mode of the keyboard | ⬜ | KeyboardTypeOptions | undefined |
multiLineText |
Enable multi lines | ⬜ | boolean | false |
isPassword |
Enable show character with password | ⬜ | boolean | false |
showPassword |
Function show and hide password | ⬜ | function | void |
hidePassword |
Hide password | ⬜ | boolean | false |
lines |
number of lines | ⬜ | number | undefined |
maxTextLength |
Length of text | ⬜ | number | undefined |
placeholderTextColor |
color of placeholder text | ⬜ | ColorValue | undefined |
label |
input label | ⬜ | string | undefined |
validateType |
Message validate type | ⬜ | string | undefined |
validateMsg |
Message validate | ⬜ | string | undefined |
setValidateMsg |
Set message validation | ⬜ | any | undefined |
extraPrefix |
extra prefix | ⬜ | boolean | false |
extraSuffix |
extra suffix | ⬜ | boolean | false |
| Prop | Description | Required | Type | Default |
|---|---|---|---|---|
status |
status of checkbox | ⬜ | number | undefined |
checkBoxLabel |
Label of checkbox | ⬜ | string | undefined |
checkBoxDisable |
Checkbox disable | ⬜ | boolean | false |
| Prop | Description | Required | Type | Default |
|---|---|---|---|---|
title |
Title of single selection | ✅ | string | undefined |
data |
List item selection | ✅ | Array | undefined |
cancelTitle |
Title button cancel | ✅ | string | 'Cancel' |
confirmTitle |
Title button confirm | ✅ | string | 'Confirm' |
modalVisible |
status bottom sheet | ✅ | boolean | false |
setItemSelectedValue |
set item value selected | ✅ | React.Dispatch<React.SetStateAction> | undefined |
itemSelectedValue |
item of data selected | ✅ | any | undefined |
setModalVisible |
set modal show or hide | ✅ | React.Dispatch<React.SetStateAction> | undefined |
onPressCancel |
on press cancel button | ⬜ | function | void |
onPressConfirm |
on press confirm button | ⬜ | function | void |
See the contributing guide to learn how to contribute to the repository and the development workflow.
MIT
Made with create-react-native-library