1

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

3 Answers 3

1

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
12
  • thanks for your response. I don't think we can use inline tailwind css
    – r121
    Mar 8, 2021 at 12:34
  • inline styles override any other styles, so it's safe to do them if you have a specifc fontSize and weight for this very instance Mar 8, 2021 at 12:37
  • This makes sense to me
    – r121
    Mar 8, 2021 at 12:47
  • Is it ok to pass several props?
    – r121
    Mar 8, 2021 at 12:47
  • yeah its totally ok, but if you only have those two scenarios you can have and if statement there checking if(secnario1) text-lg font-normal else text-3xl font-bold Mar 8, 2021 at 12:49
1

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>
3
  • If I do like this then I have to pass two font weight and two font size as props for title and subtile
    – r121
    Mar 8, 2021 at 12:44
  • @RishiPurwar tou right , I edited my answer Mar 10, 2021 at 7:54
  • Nice approach... Thanks
    – r121
    Mar 10, 2021 at 11:03
0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.