Hero

A hero section is the area that immediately shows up on the screen under the logo and menu.

Preview

Usage

npm i react-hartan

import { HeroSection } from "react-hartan"

function App() {

  return (
    <>
      <HeroSection></HeroSection>
    </>
  )
}

export default App

Customization With Props

• heroHeadName -> Accepts a string/node value, used as the heading of hero section.

• heroAbout -> Accepts a node/string value, used as the content of hero section.

• imgSrc -> Accepts a string value, the source link for the image used in hero section.

• imgState -> Accepts a Boolean value, the state for showing/hiding the hero image.

• imgAlt -> Accepts an image alt.

• buttonText -> Accepts a string/node value, the name used for the button inside hero section.

• onClickFunction -> Accepts a function, written by the user, for handling onClick logic on button.

• id -> The id prop is similar to the id attribute in HTML. It allows to provide overall component id.

• imgLoad -> The imgLoad prop is mapped to the loading attribute in HTML img tag. It allows to provide overall the value for loading attribute, "lazy" | "eager".

• userHeroSectionStyle -> Accepts the class name(s) as string, custom styling prop for the hero section container.

• userHeroContentStyle -> Accepts the class names(s) as string, custom styling prop for the hero about container containing heading, paragraph and the button.

• userButtonStyle -> Accepts the class names(s) as string, custom styling prop for the button.

Default

import { HeroSection } from "react-hartan"

function App() {

  return (
    <>
      <HeroSection></HeroSection>
    </>
  )
}

export default App

With Custom Props

// App.css

.my-class{
   background-color: red;
   padding: 1rem;

   h1{
      background-color: antiquewhite;
   }

   p{
      background-color: beige;
   }
}


// App.jsx
import { HeroSection } from "react-hartan"

function App() {

  return (
    <>
      <HeroSection imgState={false} userHeroAboutStyle={"my-class"}></HeroSection>
    </>
  )
}

export default App

Component Code

This is the code for Hero Section component.

Hero.jsx

import Button from "../Button/Button"
import heroSectionStyles from "./Hero.module.css"
import PropTypes from "prop-types"

const about = "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dicta placeat labore cupiditate laudantium atque totam architecto, aliquid, dolores numquam vel odit voluptates beatae quo voluptatum autem voluptate eos facilis tempora culpa, perferendis explicabo minima sunt unde? Natus tempora consectetur unde.";


export default function HeroSection({ heroHeadName = "Hartan Component Library", heroAbout = about, imgSrc = "https://dummyimage.com/720x600", imgState = true, imgAlt= "Hartan", buttonText = "Button", id, imgLoad, onClickFunction, userHeroSectionStyle, userHeroContentStyle, userButtonStyle }) {

    return (
        <section className={`${heroSectionStyles.heroSection} ${userHeroSectionStyle}`}>
            <div className={`${heroSectionStyles.heroSectionAbout} ${userHeroContentStyle}`}>
                <h1>{heroHeadName}</h1>
                <div>{heroAbout}</div>
                <Button userButtonStyle={`${userButtonStyle}`} buttonText={buttonText} onClickFunction={onClickFunction}/>
            </div>

            {
                imgState &&
                <figure className={`${heroSectionStyles.heroImage}`}>
                    <img src={imgSrc} alt={imgAlt} loading={imgLoad}/>
                </figure>
            }
        </section>
    )
}

HeroSection.propTypes = {
    heroHeadName: PropTypes.node,
    heroAbout: PropTypes.node,
    imgSrc: PropTypes.string,
    imgState: PropTypes.bool,
    imgAlt: PropTypes.string,
    buttonText: PropTypes.node,
    onClickFunction: PropTypes.func,
    id: PropTypes.string,
    userHeroSectionStyle: PropTypes.string,
    userHeroContentStyle: PropTypes.string,
    userButtonStyle: PropTypes.string
};

Hero.module.css

/* Hero Section CSS Module */

/* hero section container */
.heroSection {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8rem;
    gap: 5rem;
}

/* content container */
.heroSectionAbout {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    gap: 3rem;

}

.heroSectionAbout h1 {
    font-size: 4rem;
}

.heroSectionAbout div {
    font-size: 1.5rem
}

/* image container */
.heroImage {
    display: flex;
    justify-content: center;
    align-items: center;
}

.heroImage img {
    height: 30rem;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .heroSection {
        flex-direction: column;
        padding: 4rem;
    }
}