Footer Block

The Footer Component is a fully customizable and accessible footer section built with React and TypeScript. It provides a complete website footer interface with modern design patterns, logo display, content sections, and flexible customization options.

🚀 Installation

npm install @nodeblocks/frontend-footer-block@0.1.0

📖 Usage

import {Footer} from '@nodeblocks/frontend-footer-block';

Basic Usage
Advanced Usage

function BasicFooter() {
  return (
    <Footer
      logoSrc="/img/icon-small.png"
      content={
        <div>
          <p>Your trusted partner for business solutions.</p>
          <p>Contact us: info@example.com | +1 (555) 123-4567</p>
        </div>
      }
      copyright="© 2024 Your Company Name. All rights reserved.">
      <Footer.Logo />
      <Footer.Content />
      <Footer.Copyright />
    </Footer>
  );
}

function AdvancedFooter() {
  return (
    <Footer
      logoSrc="/img/icon-small.png"
      content={
        <div>
          <p>Your trusted partner for business solutions.</p>
          <p>Contact us: info@example.com | +1 (555) 123-4567</p>
        </div>
      }
      copyright="© 2024 Your Company Name. All rights reserved.">
      {({ defaultBlocks, defaultBlockOrder }) => ({
        blocks: {
          ...defaultBlocks,
          
          // 🏢 Custom Logo with props override
          logo: {
            ...defaultBlocks.logo,
            props: {
              ...defaultBlocks.logo.props,
              className: "custom-footer-logo",
            },
          },
          
          // 📝 Rich Content with full component override
          content: (
            <div style={{ 
              padding: '20px',
              backgroundColor: '#f8f9fa',
              borderRadius: '8px',
              border: '1px solid #e9ecef'
            }}>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))'}}>
                <div>
                  <h4 style={{ color: '#007bff', marginBottom: '10px' }}>🏢 Company</h4>
                  <ul style={{ listStyle: 'none', padding: 0 }}>
                    <li><a href="#about" style={{ color: '#6c757d', textDecoration: 'none' }}>About Us</a></li>
                    <li><a href="#careers" style={{ color: '#6c757d', textDecoration: 'none' }}>Careers</a></li>
                    <li><a href="#press" style={{ color: '#6c757d', textDecoration: 'none' }}>Press</a></li>
                  </ul>
                </div>
                <div>
                  <h4 style={{ color: '#28a745', marginBottom: '10px' }}>📞 Contact</h4>
                  <p style={{ color: '#6c757d', margin: '5px 0' }}>📧 info@example.com</p>
                  <p style={{ color: '#6c757d', margin: '5px 0' }}>📱 +1 (555) 123-4567</p>
                  <p style={{ color: '#6c757d', margin: '5px 0' }}>📍 123 Business St, City, State</p>
                </div>
              </div>
            </div>
          ),
          
          // ⚖️ Custom Copyright with props override
          copyright: {
            ...defaultBlocks.copyright,
            props: {
              ...defaultBlocks.copyright.props,
              style: { 
                backgroundColor: '#343a40',
                color: '#ffffff',
                padding: '15px',
                borderRadius: '4px',
                textAlign: 'center',
                marginTop: '20px'
              },
              children: (
                <div>
                  <p style={{ margin: '0 0 8px 0' }}>© 2024 Custom Company. All rights reserved.</p>
                  <div style={{ fontSize: '14px', opacity: 0.8 }}>
                    <a href="#privacy" style={{ color: '#ffffff', marginRight: '15px' }}>Privacy Policy</a>
                    <a href="#terms" style={{ color: '#ffffff', marginRight: '15px' }}>Terms of Service</a>
                    <a href="#cookies" style={{ color: '#ffffff' }}>Cookie Policy</a>
                  </div>
                </div>
              )
            },
          },
        },
        blockOrder: defaultBlockOrder,
      })}
    </Footer>
  );
}

🔧 Props Reference

Main Component Props

Prop	Type	Default	Description
`logoSrc`	`string`	Required	URL or path to the logo image to display in the footer
`content`	`ReactNode`	Required	The main content section of the footer (can include text, links, etc.)
`copyright`	`ReactNode`	Required	Copyright text or component to display at the bottom of the footer
`className`	`string`	`undefined`	Additional CSS class name for styling the footer container
`children`	`BlocksOverride`	`undefined`	Custom block components to override default rendering

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

Sub-Components

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

Footer.Logo

Prop	Type	Default	Description
`src`	`string`	Context `logoSrc`	URL or path to the logo image (overrides context logoSrc)

Note: This component inherits all HTML img element props.

Footer.Content

Prop	Type	Default	Description
`children`	`ReactNode`	Context `content`	Content to display in the footer content section (overrides context content)

Note: This component inherits all HTML div element props.

Footer.Copyright

Prop	Type	Default	Description
`children`	`ReactNode`	Context `copyright`	Copyright text or content to display (overrides context copyright)

Note: This component inherits all HTML div element props.

🔧 TypeScript Support

Full TypeScript support with comprehensive type definitions:

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

// Main component interface
interface FooterProps extends Omit<ComponentProps<'footer'>, 'content'> {
  logoSrc: string;
  content: ReactNode;
  copyright: ReactNode;
  children?: BlocksOverride<DefaultBlocks, CustomBlocks>;
}

// Context type (values passed to all sub-components)
interface FooterContextValue {
  logoSrc: string;
  copyright: ReactNode;
  content: ReactNode;
}

// Example with comprehensive footer content
function CustomFooter() {
  return (
    <Footer
      logoSrc="/assets/company-logo.svg"
      content={
        <div>
          <div>
            <h4>Contact Information</h4>
            <p>Email: info@company.com</p>
            <p>Phone: +1 (555) 123-4567</p>
            <p>Address: 123 Business St, City, State 12345</p>
          </div>
          <div>
            <h4>Quick Links</h4>
            <ul>
              <li>
                <a href="#about">About Us</a>
              </li>
              <li>
                <a href="#services">Services</a>
              </li>
              <li>
                <a href="#contact">Contact</a>
              </li>
            </ul>
          </div>
        </div>
      }
      copyright="© 2024 Your Company Name. All rights reserved."
      className="custom-footer">
      <Footer.Logo className="company-logo" alt="Company Logo" />
      <Footer.Content className="footer-main-content" />
      <Footer.Copyright className="footer-copyright" style={{fontSize: '14px', color: '#666'}}>
        © 2024 Custom Company. All rights reserved. | Privacy Policy | Terms of Service
      </Footer.Copyright>
    </Footer>
  );
}

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

🚀 Installation​

📖 Usage​

🔧 Props Reference​

Main Component Props​

Sub-Components​

Footer.Logo​

Footer.Content​

Footer.Copyright​

🔧 TypeScript Support​