How to create a translucent text input in ReactJS ?

In this article, we are going to learn how to create a translucent text input in ReactJS.

Prerequisites:

1. Knowledge of JavaScript (ES6)
2. Knowledge of HTML/CSS.
3. Basic knowledge of ReactJS.

React hooks used in building this application are:

• React useState

JavaScript modules:

• styled-components
• framer-motion 

Creating React Application and Installing Modules:

Step 1: Now, you will start a new project using create-react-app so open your terminal and type:

npx create-react-app translucent-input-box

Step 2: After creating your project folder i.e. translucent-input-box , move to it using the following command.

cd translucent-input-box

Step 3: Add the npm packages you will need during the project:

npm install framer-motion styled-components

Step 5: Now open your newly created project and open the src folder and delete the following files (Optional): 

• • logo.svg
  • serviceWorker.js
  • setupTests.js
  • index.css
  • App.test.js (if any)

Create a folder named Input and create the following files:

• Component.jsx
• Component.motion.js
• Component.styles.js

Project structure: It will look like this.

Project structure

Approach: 

• We are going to create a translucent animated text input using framer-motion and styled components.
• Wrapper, Input, Label, Underline are the styled components used to make the text input box collectively in Component.jsx file.
• In Component.jsx file, we use framer-motion with custom animation variants from the Component.motion.js file to animate the text input box.
• React useState hook is used to manage the state of value that is used as a placeholder attribute & also to set it as a label when active.
• Framer-motion useCycle hook is similar to react useState hook. It cycles through a series of visual properties used for animation. It is used to toggle between or cycle through animation variants.

Implementation:

App.js

import React, { useState } from "react";
import "./App.css";

import Input from "./Input";

const App = () => {
  // The useState hook is used to manage the state of 
  // "value" that is used as placeholder attribute
  // and also to set it as a label when clicked
  const [value, setValue] = useState("");
  
  return (
    <div className="App">
      <div className="container">
       {/* "Input" component created using styled-components
       and animated using framer-motion
       */}
        <Input
          value={value}
          onChange={(id, value) => setValue(value)}
          label={"First name"}
        />
      </div>
    </div>
  );
};

export default App;