Skip to main content

Hero Block

The Hero Component is a fully customizable and accessible hero section built with React and TypeScript. It provides a complete hero interface with modern design patterns, image display, and flexible customization options.

πŸš€ Installation​

npm install @nodeblocks/frontend-hero-block@0.1.1

πŸ“– Usage​

import {Hero} from '@nodeblocks/frontend-hero-block';
function BasicHero() {
  return (
    <Hero
      buttonText="Get Started"
      byline="Welcome to Our Platform"
      imageUrl="/img/undraw_docusaurus_mountain.svg"
      onClickButton={() => {
        console.log('Hero button clicked');
      }}>
      <Hero.HeroContent>
        <Hero.HeroContent.HeroByline style={{color: 'black'}} />
        <Hero.HeroContent.ActionButton />
      </Hero.HeroContent>
      <Hero.HeroImg />
    </Hero>
  );
}

πŸ”§ Props Reference​

Main Component Props​

PropTypeDefaultDescription
buttonTextstringRequiredText to display on the action button
bylineReactNodeRequiredMain headline text for the hero section
imageUrlstringRequiredURL of the image to display in the hero section
onClickButton() => voidRequiredCallback function triggered when the action button is clicked
secondaryTextReactNodeundefinedSecondary text displayed below the byline
tertiaryTextReactNodeundefinedTertiary text displayed near the action button
classNamestringundefinedAdditional CSS class name for styling the hero container
childrenBlocksOverrideundefinedCustom block components to override default rendering

Note: The main component inherits all HTML div element props.

Sub-Components​

The Hero component provides several sub-components. All sub-components receive their default values from the main component's context and can override these values through props.

Hero.HeroImg​

PropTypeDefaultDescription
srcstringContext imageUrlURL of the image to display (overrides context imageUrl)

Note: This component inherits all HTML img element props.

Hero.HeroContent​

This component acts as a container and automatically renders the nested content components unless custom children are provided.

Note: This component inherits all HTML div element props.

Hero.HeroContent.HeroByline​

PropTypeDefaultDescription
childrenReactNodeContext bylineContent to display as the main headline (overrides context byline)

Note: This component inherits all HTML h6 element props.

Hero.HeroContent.SecondaryText​

PropTypeDefaultDescription
childrenReactNodeContext secondaryTextContent to display as secondary text (overrides context secondaryText)

Note: This component inherits all HTML h3 element props.

Hero.HeroContent.ActionButton​

PropTypeDefaultDescription
childrenReactNodeContext buttonTextButton content/text (overrides context buttonText)
onClick() => voidContext onClickButtonClick handler for the action button (overrides context onClickButton)

Note: This component inherits all HTML button element props.

Hero.HeroContent.TertiaryText​

PropTypeDefaultDescription
childrenReactNodeContext tertiaryTextContent to display as tertiary text (overrides context tertiaryText)

Note: This component inherits all HTML span element props.

πŸ”§ TypeScript Support​

Full TypeScript support with comprehensive type definitions:

import {Hero} from '@nodeblocks/frontend-hero-block';
import {ComponentProps, ReactNode} from 'react';

// Main component interface
interface HeroProps extends Omit<ComponentProps<'div'>, 'children'> {
  buttonText: string;
  byline: ReactNode;
  onClickButton: () => void;
  imageUrl: string;
  secondaryText?: ReactNode;
  tertiaryText?: ReactNode;
  className?: string;
}

// Example with comprehensive hero configuration
function CustomHero() {
  const handleButtonClick = () => {
    console.log('Hero button clicked!');
    // Handle navigation or action
  };

  return (
    <Hero
      buttonText="Get Started Today"
      byline="Transform Your Business with Our Platform"
      imageUrl="/assets/hero-image.jpg"
      onClickButton={handleButtonClick}
      secondaryText="Streamline operations and boost productivity"
      tertiaryText="Free 30-day trial β€’ No credit card required"
      className="custom-hero-section"
      style={{ minHeight: '600px' }}
      id="hero-section">
      <Hero.HeroContent className="hero-content-custom">
        <div>
          <Hero.HeroContent.HeroByline 
            className="custom-headline"
            style={{ fontSize: '3rem', fontWeight: 'bold' }}
          />
          <Hero.HeroContent.SecondaryText 
            className="custom-subtext"
            style={{ color: '#666', marginTop: '1rem' }}
          />
        </div>
        <div>
          <Hero.HeroContent.ActionButton 
            className="custom-cta-button"
            type="button"
            disabled={false}
          >
            πŸš€ Start Free Trial
          </Hero.HeroContent.ActionButton>
          <Hero.HeroContent.TertiaryText 
            className="custom-disclaimer"
            style={{ fontSize: '0.9rem', opacity: 0.8 }}
          />
        </div>
      </Hero.HeroContent>
      <Hero.HeroImg 
        className="hero-image-custom"
        alt="Hero background image"
        width={600}
        height={400}
        loading="lazy"
      />
    </Hero>
  );
}

Built with ❀️ using React, TypeScript, and modern web standards.