Custom headings (h1, h2, etc ...)

Hello! When building a component (I'm using React in Next), I want to build a component with plain text, but I wanna be able to change the heading order based on which page it is on. Example text: "I'm a subtitle" Homepage: I want this to be a h3 About page: I want it it o be a h1 How is this done, and is there any issues with this I haven't thought about? When I google this the only thing I get is headers, which is not the issue here ...
4 Replies
Jochem
Jochemā€¢2y ago
You'll probably have to add a prop, but it sounds like a heading tag with extra steps to me
ƅ Marlon G
ƅ Marlon GOPā€¢2y ago
... so you're saying? šŸ™ƒ Drop the idea and just add it as an element on the relevant page? Could i do: Component:
export const Title = () => {
return (
<>
<p>Title</p>
</>
);
};
export const Title = () => {
return (
<>
<p>Title</p>
</>
);
};
Page component:
export const Page = () => {
return (
<>
<h1>
<Title />
</h1>
</>
);
};
export const Page = () => {
return (
<>
<h1>
<Title />
</h1>
</>
);
};
Will this semantically work?
Jochem
Jochemā€¢2y ago
mostly that's what I'm saying yes, unless you have another good reason to split it out into a component there's pretty much no way to figure out what heading it should be automatically, and if you add logic based on the page it's included in it's just going to break if you ever change the page and forget to update your component
ƅ Marlon G
ƅ Marlon GOPā€¢2y ago
Settled. Thanx! šŸ«”
Want results from more Discord servers?
Add your server