Product
Introducing Enhanced Alert Actions and Triage Functionality
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.
azir-input
Advanced tools
Readme
An advance Input component that should render nicely on any platform. Supports a great level of customization.
for version 1.0.3 and above now you can use startIcon and EndIcon instead of Icon props.
to install the latest version of azir-input
you only need to run:
npm install azir-input --save
or
yarn add azir-input
Examples
import Input from "azir-input";
import {SolidIcons} from "azir-icon";
---
<Input help="error!!" label="Nice Input ;)" placeholder="Email"
endIcon={SolidIcons.boxOpen} endIconSize={60} endIconColor="error" />
import Input from "azir-input";
import Icon, {SolidIcons} from "azir-icon";
import AzirTheme from "azir-theme";
---
<View style={ { width: "80%" } }>
<Input
endIcon={<Icon icon={SolidIcons.at} size={22} color={AzirTheme.COLORS.SUCCESS} />}
inputStyle={ { color: "green" } }
help="خطأ !!"
label="البريد الإلكتروني : "
labelPosition="right"
helpStyle={ { marginRight: 110 } }
/>
</View>
import Input from "azir-input";
import Icon, {SolidIcons} from "azir-icon";
---
<Input
labelPosition="top"
helpPosition="top"
label="Password"
labelStyle={ { color: "#fff", padding: 5 } }
inputStyle={ { fontSize: 18, paddingHorizontal: 10, color: "#34495e" } }
style={ { height: 55, paddingHorizontal: 0, backgroundColor: "#fff" } }
containerStyle={ { backgroundColor: "#34495e" } }
password
renderPasswordIcon={password => {
return <Icon style={ [ { backgroundColor: "#34495e", padding: 13 }, props.iconStyle] }
icon={password ? SolidIcons.eye : SolidIcons.ellipsisHh} size={24} color="#ccc" />;
} }
></Input>
import Input from "azir-input";
import Icon, {SolidIcons} from "azir-icon";
---
<Input
labelPosition="top"
label="Email"
helpPosition="top"
labelStyle={ { color: "#2196f3" } }
inputStyle={ { fontSize: 18, paddingHorizontal: 10, color: "#2196f3" } }
style={ {
borderColor: "#2196f3",
borderBottomWidth: 2,
borderTopWidth: 0,
borderLeftWidth: 0,
borderRightWidth: 0,
height: 55,
paddingHorizontal: 0,
backgroundColor: "transparent"
} }
endIcon={<Icon style={ { padding: 13 } } icon={SolidIcons.at} size={24} color={"#2196f3"}></Icon>}
></Input>
import Input from "azir-input";
import Icon, {SolidIcons} from "azir-icon";
---
<Input
labelPosition="top"
helpPosition="top"
labelStyle={ { color: "#BFD2FF" } }
inputStyle={ { fontSize: 18, paddingHorizontal: 10, color: "#BFD2FF" } }
style={ {
borderColor: "#59e3e6",
borderBottomWidth: 3,
borderTopWidth: 0,
borderLeftWidth: 0,
borderRightWidth: 0,
height: 60,
paddingHorizontal: 0,
backgroundColor: "#363a4e"
} }
endIcon={<Icon style={ { padding: 13 } } icon={SolidIcons.arrowRight} size={24} color={"#BFD2FF"}>
</Icon>}>
</Input>
type
endIcon
endIconSize
endIconColor
startIcon
startIconSize
startIconColor
password
disabled
borderless
rounded
renderPasswordIcon
placeholderTextColor
color
selectionColor
bgColor
label
labelPosition
labelStyle
help
helpPosition
helpStyle
containerStyle
type
Determines which keyboard to open, e.g.numeric.
Type | Required | Default |
---|---|---|
enum('default', 'email-address', 'numeric', 'phone-pad', 'ascii-capable', 'numbers-and-punctuation', 'url', 'number-pad', 'name-phone-pad', 'decimal-pad', 'twitter', 'web-search', 'visible-password') | No | default |
endIcon
Set the end Icon of the input Text, can be string or jsx element.
Type | Required | Default |
---|---|---|
string, JSX element | No | Not Set |
endIconSize
Set the end Icon Size of the input Text.
Type | Required | Default |
---|---|---|
number | No | Not Set |
endIconColor
Set the end Icon Color of the input Text.
Type | Required | Default |
---|---|---|
azir-color | No | theme |
startIcon
Set the start Icon of the input Text, can be string or jsx element.
Type | Required | Default |
---|---|---|
string, JSX element | No | Not Set |
startIconSize
Set the start Icon Size of the input Text.
Type | Required | Default |
---|---|---|
number | No | Not Set |
startIconColor
Set the start Icon Color of the input Text.
Type | Required | Default |
---|---|---|
azir-color | No | theme |
password
Tells the input that this is going to be a password input. ( it will show eye icon which you can press to toggle show pass or not)
Type | Required | Default |
---|---|---|
bool | No | false |
disabled
If true, disable all interactions for this component.
Type | Required | Default |
---|---|---|
bool | No | false |
borderless
Sets the Input's borderWidth to 0
Type | Required | Default |
---|---|---|
bool | No | false |
rounded
Sets the corners to be rounded
Type | Required | Default |
---|---|---|
bool | No | false |
renderPasswordIcon
Render Props Function you can override Input icon , we pass password boolean args
Type | Required | Default |
---|---|---|
Render Prop Function | No | null |
placeholderTextColor
Sets the placeholder's text color
Type | Required | Default |
---|---|---|
azir-color | No | AzirTheme.COLORS.GREY |
color
Input Text color
Type | Required | Default |
---|---|---|
azir-color | No | black |
selectionColor
Input Text cursor color
Type | Required | Default |
---|---|---|
azir-color | No | theme |
bgColor
Input background color
Type | Required | Default |
---|---|---|
azir-color | No | Not set |
label
Sets the label of the input
Type | Required | Default |
---|---|---|
string, JSX element | No | Not Set |
labelPosition
Sets the label Position
Type | Required | Default |
---|---|---|
"top" , "left" , "right" | No | top |
labelStyle
override Label Style
Type | Required |
---|---|
style | No |
help
Sets the help of the input
Type | Required | Default |
---|---|---|
string, JSX element | No | Not Set |
helpPosition
Sets the help Position
Type | Required | Default |
---|---|---|
"top" , "bottom" | No | bottom |
helpStyle
override help Style
Type | Required |
---|---|
style | No |
containerStyle
override input container Style which include ( input text + icon)
Type | Required |
---|---|
style | No |
FAQs
An advance Input component that should render nicely on any platform. Supports a great level of customization.
The npm package azir-input receives a total of 50 weekly downloads. As such, azir-input popularity was classified as not popular.
We found that azir-input demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.
Security News
Polyfill.io has been serving malware for months via its CDN, after the project's open source maintainer sold the service to a company based in China.
Security News
OpenSSF is warning open source maintainers to stay vigilant against reputation farming on GitHub, where users artificially inflate their status by manipulating interactions on closed issues and PRs.