Skip to main content

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. Built on top of MUI components for consistent styling.

πŸš€ Installation​

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

πŸ“– Usage​

import {Footer} from '@nodeblocks/frontend-footer-block';
Live Editor
function SimpleFooter() {
  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>
  );
}
Result
Loading...

πŸ”§ Props Reference​

Main Component Props​

PropTypeDefaultDescription
logoSrcstringRequiredURL or path to the logo image to display in the footer
contentReactNodeRequiredThe main content section of the footer (can include text, links, etc.)
copyrightReactNodeRequiredCopyright text or component to display at the bottom of the footer
spacingnumber | string2Spacing between child elements (MUI Stack spacing)
classNamestringundefinedAdditional CSS class name for styling the footer container
sxSxProps<Theme>{ backgroundColor: 'primary.main', color: 'primary.contrastText', py: 3, px: 2, typography: 'body2' }MUI system props for custom styling
childrenBlocksOverrideundefinedCustom block components to override default rendering

Note: This component inherits all MUI Stack component props (rendered as component="footer").

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.

Renders the footer logo inside a MUI Box container.

PropTypeDefaultDescription
logoSrcstringContext valueURL or path to the logo image (overrides context logoSrc)
classNamestringundefinedAdditional CSS class name for styling
sxSxProps<Theme>{ pb: 0.5 }MUI system props for custom styling

Note: This component inherits all MUI Box component props. The logo is rendered as an <img> element with alt="Footer logo" inside the Box.

Footer.Content​

Renders the footer content section using MUI Box.

PropTypeDefaultDescription
contentReactNodeContext valueContent to display (overrides context content)
childrenReactNodeundefinedAlternative way to provide content (used if content is not provided)
classNamestringundefinedAdditional CSS class name for styling
sxSxProps<Theme>undefinedMUI system props for custom styling

Note: This component inherits all MUI Box component props. Priority: content prop > children prop.

Footer.Copyright​

Renders the copyright section using MUI Box.

PropTypeDefaultDescription
copyrightReactNodeContext valueCopyright content to display (overrides context copyright)
childrenReactNodeundefinedAlternative way to provide copyright content
classNamestringundefinedAdditional CSS class name for styling
sxSxProps<Theme>undefinedMUI system props for custom styling

Note: This component inherits all MUI Box component props. Priority: copyright prop > children prop.

🎨 Configuration examples​

Custom Background Styling​

<Footer
  logoSrc="/logo.svg"
  content={<p>Footer content</p>}
  copyright="Β© 2024 Company"
  sx={{
    bgcolor: 'grey.900',
    color: 'grey.100',
    py: 4,
    px: 3,
  }}
/>

Custom Logo Container Styling​

<Footer.Logo
  sx={{
    pb: 2,
    '& img': {
      maxHeight: 40,
      width: 'auto',
    },
  }}
/>
<Footer.Copyright
  sx={{
    pt: 2,
    mt: 2,
    borderTop: '1px solid',
    borderColor: 'grey.800',
  }}
/>

πŸ”§ TypeScript Support​

Full TypeScript support with comprehensive type definitions:

import {Footer} from '@nodeblocks/frontend-footer-block';
import {StackProps, BoxProps} from '@mui/material';
import {ReactNode} from 'react';

// Main component props extend MUI StackProps
interface FooterProps extends Omit<StackProps, 'content' | 'children'> {
  logoSrc: string;
  content: ReactNode;
  copyright: ReactNode;
  children?: BlocksOverride;
}

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

// Example with typed props
function TypedFooter() {
  return (
    <Footer
      logoSrc="/assets/logo.svg"
      content={
        <div>
          <p>Contact: info@example.com</p>
          <p>Phone: +1 (555) 123-4567</p>
        </div>
      }
      copyright="Β© 2024 Company Name. All rights reserved."
      spacing={3}
      sx={{
        bgcolor: 'grey.900',
        color: 'grey.100',
      }}
    >
      <Footer.Logo sx={{pb: 1}} />
      <Footer.Content />
      <Footer.Copyright sx={{pt: 2, borderTop: '1px solid', borderColor: 'grey.800'}} />
    </Footer>
  );
}

πŸ“ Notes​

  • The component uses MUI's Stack rendered as a footer element with default spacing={2}
  • Default styling includes backgroundColor: 'primary.main', color: 'primary.contrastText', padding (py: 3, px: 2), and typography: 'body2'
  • Footer.Logo renders an <img> element inside a Box with alt="Footer logo"
  • Footer.Content and Footer.Copyright support both context values and direct children
  • All sub-components support the sx prop for MUI system styling
  • Block override pattern allows inserting custom blocks and reordering

Built with ❀️ using React, TypeScript, and MUI.