CODEWITHSUNDEEP
cssreactjsjsxtailwind-css
r121
r121

Reputation: 2728

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>
            </>
        )}

Upvotes: 1

Views: 15137

Answers (3)

user17412378
user17412378

Reputation:

We can dynamic it by className

 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

Upvotes: 0

i am davood
i am davood

Reputation: 175

I edit my answer

check this :

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

Upvotes: 1

That Guy Kev
That Guy Kev

Reputation: 396

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

Upvotes: 1

Related Questions