Question 42601 in Html Question posted in
Some basic documentation can be found here.

How to Export Import Component On React Js – Html

I’m just learning laravel & react js.
I am trying to make a project in laravel and react js. So how can I export component TextInput (className) to my Login page.

TextInput.jsx :

import { forwardRef, useEffect, useRef } from "react";

export default forwardRef(
    function TextInput({ type = "text", className, isFocused = false, ...props }, ref) {
        const input = ref ? ref : useRef();

        useEffect(() => {
            if (isFocused) {
                input.current.focus();
            }
        }, []);

        return (
            <input
                {...props}
                type={type}
                className={
                    "rounded-2xl bg-form-bg py-[13px] px-7 w-full focus:outline-alerange focus:outline-none"
                }
                ref={input}
            />
        );
    }
);

Login.jsx script :

import React from "react";
import TextInput from "@/Components/TextInput";

export default function Login() {
    return (
        <div className="mx-auto max-w-screen min-h-screen bg-black text-white md:px-10 px-3">
            <div className="fixed top-[-50px] hidden lg:block">
                <img
                    src="/images/signup-image.png"
                    className="hidden laptopLg:block laptopLg:max-w-[450px] laptopXl:max-w-[640px]"
                    alt=""
                />
            </div>
            <div className="py-24 flex laptopLg:ml-[680px] laptopXl:ml-[870px]">
                <div>
                    <img src="/images/moonton-white.svg" alt="" />
                    <div className="my-[70px]">
                        <div className="font-semibold text-[26px] mb-3">
                            Welcome Back
                        </div>
                        <p className="text-base text-[#767676] leading-7">
                            Explore our new movies and get <br />
                            the better insight for your life
                        </p>
                    </div>
                    <form className="w-[370px]">
                        <div className="flex flex-col gap-6">
                            <div>
                                <label className="text-base block mb-2">
                                    Email Address
                                </label>
                                <input
                                    type="email"
                                    name="email"
                                    placeholder="Email Address"
                                />
                            </div>
                            <div>
                                <label className="text-base block mb-2">
                                    Password
                                </label>
                                <input
                                    type="password"
                                    name="password"
                                    placeholder="Password"
                                />
                            </div>
                        </div>
                        <div className="grid space-y-[14px] mt-[30px]">
                            <a
                                href="/"
                                className="rounded-2xl bg-alerange py-[13px] text-center"
                            >
                                <span className="text-base font-semibold">
                                    Start Watching
                                </span>
                            </a>
                            <a
                                href="sign_up.html"
                                className="rounded-2xl border border-white py-[13px] text-center"
                            >
                                <span className="text-base text-white">
                                    Create New Account
                                </span>
                            </a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    );
}

I want to use className (email & password) from component/TextInput.jsx to pages/Login.jsx.

On this project I am using laravel 10

Tags:

2

Answers


  1. 0

    First of all, you are importing forwardRef from react so you just need to use the forwardRef wherever you need.
    One more thing the functions or hooks which are imported from react cannot be exported by us as a component or so.

    Try to export the text input instead of forwardRef
    like,

    export const TextInput = forwardRef((props, ref) => {
    return (
      <input
        ref={ref}
        {...props}
      />
    );
});

    And in Login.jsx you can import the TextInput by passing with its relevant path like,

    import { TextInput } from "path/to/file";

<TextInput props={props} />

    You can check the documentation here and some good tutorials for React.js here.

    Login or Signup to reply.
  2. 0

    To use the TextInput component in your Login page and replace the className of the email and password input fields, you can import the TextInput component and use it like this:

    import React, { useState } from "react";
import TextInput from "@/Components/TextInput";

    Replace the email and password input fields with the TextInput component, and pass the required props to it:

    <div className="flex flex-col gap-6">
  <div>
    <label className="text-base block mb-2">
      Email Address
    </label>
    <TextInput
      type="email"
      name="email"
      placeholder="Email Address"
      className="your-custom-classname"
    />
  </div>
  <div>
    <label className="text-base block mb-2">
      Password
    </label>
    <TextInput
      type="password"
      name="password"
      placeholder="Password"
      className="your-custom-classname"
    />
  </div>
</div>

    If you want to add custom styles to the TextInput component, you can pass the className prop to it and add your custom styles like this:

    <TextInput
  type="email"
  name="email"
  placeholder="Email Address"
  className="rounded-2xl bg-form-bg py-[13px] px-7 w-full focus:outline-alerange focus:outline-none your-custom-classname"
/>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search