react-native-customized-box ·

React Native Customized Box is very simple and easy to use.

Content

• Getting started
• Overview
• Method and Props Configuration
• Author
• License

Getting started

Prerequisites

• Node (version 12 or greater).
• Yarn (version 1.5 or greater).
• React, React-Native should be installed
• A fork of the repo (for any contributions).

Installation

Using NPM

npm i --save react-native-customized-box

Using Yarn

yarn add react-native-customized-box

Overview

📖 Below we provide examples with code how to use!

import CustomBox from "react-native-customized-box";

► Example - 1

→ Box fully customizable

| | | | :-----------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------: | | | |

Code Snippet ↓

      <CustomBox
        placeholder={"Username"}
        boxColor={"dodgerblue"}
        focusColor={"#33ff00"}
        boxStyle={{ borderRadius: 40, borderWidth: 2 }}
      />
      <CustomBox
        placeholder={"Password"}
        toggle={true}
        boxColor={"dodgerblue"}
        focusColor={"#33ff00"}
        boxStyle={{ borderRadius: 40, borderWidth: 2, borderStyle: "dotted" }}
      />

► Example - 2

→ Toggle feature enabled

| | | | :-----------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------: | | | |

Code Snippet ↓

      <CustomBox placeholder={"Username"} />
      <CustomBox placeholder={"Password"} toggle={true} />

► Example - 3

→ Box color change while focusing

| | | | :-----------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------: | | | |

Code Snippet ↓

      <CustomBox
        placeholder={"Username"}
        boxColor={"dodgerblue"}
        focusColor={"#33ff00"}
      />
      <CustomBox
        placeholder={"Password"}
        toggle={true}
        boxColor={"dodgerblue"}
        focusColor={"#33ff00"}
      />

► Example - 4

→ Label and Required option enable to give error on condition

| | | | :-----------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------: | | | |

Code Snippet ↓

      <CustomBox
        placeholder={"Username"}
        boxColor={"dodgerblue"}
        focusColor={"#33ff00"}
        boxStyle={{ borderRadius: 40, borderWidth: 2, borderStyle: "dashed" }}
        inputStyle={{ textAlign: "center", fontWeight: "bold", color: "red" }}
        labelConfig={{
          text: "Username",
          style: {
            color: "#1f5212",
            fontWeight: "bold",
          },
        }}
        requiredConfig={{
          text: "*This is Required",
        }}
      />
      <CustomBox
        placeholder={"Password"}
        toggle={true}
        boxColor={"dodgerblue"}
        focusColor={"#33ff00"}
        boxStyle={{ borderRadius: 40, borderWidth: 2 }}
        inputStyle={{ fontWeight: "bold", color: "red" }}
        labelConfig={{
          text: "Password",
          style: {
            color: "#0e0e21",
            fontWeight: "bold",
          },
        }}
        requiredConfig={{
          text: <Text>*Add Custom Message and decoreate your own</Text>,
          style: { textAlign: "center", textDecorationLine: "underline" },
        }}
      />

Method and Props Configuration

🔧 Below are the method which you can use to customized the Box in your style

| Method | Type | Description | | :--------------- | :------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | width | Number | This is not *Mandatory By default set to 300 but you can change and add your own | | height | Number | This is not *Mandatory By default set to 50 but you can change and add your own | | placeholder | String | Provide text for the Placeholder | | toggle | Boolean | Provide True to display SHOW/HIDE by default set to False | | boxColor | String | Provide Color for the InputBox by default color set to silver | | focusColor | String | Provide Color for change the box color while focusing the InputBox | | boxStyle | Object | Provide custom style/decoration for the InputBox | | inputStyle | Object | Provide custom style/decoration for the Text inside the InputBox | | labelConfig | Object | text: Provide text for the Label (String) style: Provide custom style for the Label (Object) | | requiredConfig | Object | text: Provide custom mandatory message to display like(*This is Required) you can add your own (String) style: Provide custom style for the required text (Object) | | values | String | You can use this to set predefine values or get the current InputBox value | | onChangeText | Function | Function like onChangeText |

Author

Thank You All 🙏🏻

Made with 🖤 by

Author : Rishu Chowdhary

Email : [email protected]

License

MIT License 📄

This project is licensed under the MIT License - see the LICENSE.md file for details