Skip to main content

How To Use Block

The HowToUse Component is a fully customizable and accessible step-by-step guide component built with React and TypeScript. It provides a complete interface for displaying process flows, usage instructions, and call-to-action sections with modern design patterns and flexible customization options.

πŸš€ Installation​

npm install @nodeblocks/frontend-how-to-use-block

πŸ“– Usage​

import {HowToUse} from '@nodeblocks/frontend-how-to-use-block';
Live Editor
function BasicHowToUse() {
  return (
    <HowToUse>
      <HowToUse.Header subtitle="How it works">
        STEPS
      </HowToUse.Header>
      
      <HowToUse.CardList>
        <HowToUse.Card 
          icon={<span>πŸ“</span>} 
          headerContent="Create Profile">
          Sign up and create your professional profile with your skills and experience.
        </HowToUse.Card>
        
        <HowToUse.Card 
          icon={<span>πŸ”</span>} 
          headerContent="Browse Projects">
          Search through available projects and find the ones that match your interests.
        </HowToUse.Card>
        
        <HowToUse.Card 
          icon={<span>πŸ’¬</span>} 
          headerContent="Get Connected">
          Apply to projects and connect with potential employers.
        </HowToUse.Card>
      </HowToUse.CardList>
      
      <HowToUse.Footer 
        message="Get started in just 1 minute!"
        linkHref="#sign-up"
        linkContent="Sign Up Free"
      />
    </HowToUse>
  );
}
Result
Loading...

πŸ”§ Props Reference​

Main Component Props​

PropTypeDefaultDescription
classNamestringundefinedAdditional CSS class name for styling the container
childrenBlocksOverrideundefinedCustom blocks override for advanced customization

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

Sub-Components​

The HowToUse 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.

HowToUse.Header​

PropTypeDefaultDescription
childrenReactNode"STEP"Main header text content
subtitleReactNode"How it works"Subtitle text displayed below the main header

Note: This component inherits all HTML div element props.

HowToUse.CardList​

PropTypeDefaultDescription
childrenReactNodeDefault cards arrayArray of Card components to display in sequence

Note: This component inherits all HTML div element props.

HowToUse.Card​

PropTypeDefaultDescription
iconReactNodeRequiredIcon or element to display in the card header
headerContentReactNodeRequiredTitle content for the card
childrenReactNodeRequiredDescription or body content of the card

Note: This component inherits all HTML div element props.

HowToUse.Footer​

PropTypeDefaultDescription
messageReactNode"Get started in just 1 minute!"Message text displayed above the call-to-action button
linkHrefstring"/sign-up"URL for the call-to-action button
linkContentReactNode"Sign Up Free"Text content for the call-to-action button
childrenReactNodeundefinedAdditional content to display in the footer

Note: This component inherits all HTML div element props.

πŸ”§ TypeScript Support​

Full TypeScript support with comprehensive type definitions:

import {HowToUse} from '@nodeblocks/frontend-how-to-use-block';
import {ComponentProps, ReactNode} from 'react';

// Main component interface
interface HowToUseProps extends Omit<ComponentProps<'div'>, 'children'> {
  children?: BlocksOverride<DefaultBlocks, CustomBlocks>;
}

// Sub-component interfaces (all inherit from their respective HTML elements)
interface HeaderProps extends ComponentProps<'div'> {
  subtitle: ReactNode;
}

interface CardProps extends ComponentProps<'div'> {
  icon: ReactNode;
  headerContent: ReactNode;
}

interface FooterProps extends ComponentProps<'div'> {
  message: ReactNode;
  linkHref: string;
  linkContent: ReactNode;
}

// Example with custom step interface
interface CustomStep {
  icon: React.ReactNode;
  title: string;
  description: string;
}

const steps: CustomStep[] = [
  {
    icon: <span>πŸ“</span>,
    title: 'Register',
    description: 'Create your account and profile',
  },
  {
    icon: <span>πŸ”</span>,
    title: 'Search',
    description: 'Find projects that match your skills',
  },
  {
    icon: <span>πŸ’Ό</span>,
    title: 'Apply',
    description: 'Submit applications to interesting projects',
  },
];

// Advanced example with custom styling and props
function CustomHowToUse() {
  return (
    <HowToUse className="custom-how-to-use" id="getting-started-section" style={{padding: '2rem'}}>
      <HowToUse.Header subtitle="Getting Started" className="custom-header" style={{textAlign: 'center'}}>
        HOW IT WORKS
      </HowToUse.Header>

      <HowToUse.CardList className="custom-card-list" style={{maxWidth: '1200px', margin: '0 auto'}}>
        {steps.map((step, index) => (
          <HowToUse.Card
            key={index}
            icon={step.icon}
            headerContent={step.title}
            className="custom-step-card"
            style={{backgroundColor: '#f8f9fa'}}
          >
            {step.description}
          </HowToUse.Card>
        ))}
      </HowToUse.CardList>

      <HowToUse.Footer
        message="Start your journey today!"
        linkHref="/get-started"
        linkContent="Get Started Now"
        className="custom-footer"
        style={{marginTop: '3rem'}}
      />
    </HowToUse>
  );
}

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