react-native-customized-box v1.1.0

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

Author

Thank You All 🙏🏻

Made with 🖤 by

Author : Rishu Chowdhary

Email : hi.10rishu@gmail.com

License

MIT License 📄

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