cssreactjsjsxtailwind-css

How to change font size and font weight dynamically in reactjs?


I am trying to change the header part of my react app dynamically. I want a different font size, font weight, title, and subtitle for the homepage and other pages of my react web app. This is what I want on the homepage. Hello there should be smaller on Homepage but Welcome Back should be large enter image description here

This is what I want on other pages. Hello there should be bigger on Homepage but lorem ipsum lorem ipsum should be small enter image description here

This is my code for the homepage heading

const Hero = ({ fontSize, fontWeight, title, subTitle }) => {

return (
    <div className="mt-2 mb-8">
        <p className="font-heading text-lg font-normal text-white">Hello There 👋,</p>
        <p className="font-heading text-3xl font-bold text-white">{subTitle}</p>
         // another react component
    </div>
)
}

export default Hero

I want to know how to change this code dynamically so I can use it for other pages bypassing different props for font weight, font size, title, and subtitle. I am using react and tailwind css

Anyone Please help me with this issue. Thank You Edited:

{pathName === '/' ? (
                <>
                    <p className="font-heading text-lg font-normal text-white">`Hello There 👋,</p>
                    <p className="font-heading text-3xl font-semibold text-white">{subTitle}</p>
    

        </>
        ) : (
            <>
                <p className="font-heading text-3xl font-semibold text-white">Hello There 👋,</p>
                <p className="font-heading text-lg font-normal text-white">subTitle</p>
            </>
        )}

Solution

  • You can add in-line styling

    const Hero = ({ fontSize, fontWeight, title, subTitle }) => {
    
    return (
        <div className="mt-2 mb-8">
            <p style={{fontSize:fontSize, fontWeight:fontWeight}} className="font-heading text-lg font-normal text-white">{title}</p>
            <p className="font-heading text-3xl font-bold text-white">{subTitle}</p>
        </div>
    )
    }
    
    export default Hero
    

    and do accordingly for the other element

    Edit: Or you can pass in fontSize and fontWeight as calss names

    const Hero = ({ titleFontSize,subTitleFontSize, titleFontWeight, subTitleFontWeight, title, subTitle }) => {
        
        return (
            <div className="mt-2 mb-8">
                <p className={`font-heading ${titleFontSize} ${titleFontWeight} text-white`}>{title}</p>
                <p className={`font-heading ${subTitleFontSize} ${subTitleFontWeight} text-white`}>{subTitle}</p>
            </div>
        )
        }
        
        export default Hero
    

    Then whenever you use the component you pass those props e.g

    <Hero titleFontSize="text-lg" subTitleFontSize="text-3xl" tileFontWeight="font-normal" subTitleFontWeight="font-bold" title="Title" subTitle="Sub Title" />
    

    Or use if statement

    const Hero = ({ scenario1, title, subTitle }) => {
        
        return (
            <div className="mt-2 mb-8">
                <p className={`font-heading ${scenario1 ? "text-lg font-normal" : "text-3xl font-bold"} text-white`}>{title}</p>
                <p className={`font-heading ${scenario1 ? "text-3xl font-bold" : "text-lg font-normal"} text-white`}>{subTitle}</p>
            </div>
        )
        }
        
        export default Hero
    

    and use it like this

    <Hero title="Title" subTitle="Subtitle" scenario1/> // This will render Scenario 1
    <Hero title="Title" subTitle="Subtitle"/> // This will render default -in your case its Scenario 2