react-component/footer

README

@rc-component/footer

_{Part of the Ant Design ecosystem.}

🦶 Footer primitives for React, maintained in the Ant Design ecosystem.

Highlights

Responsive footer layout with columns, links, custom icons, and a bottom area.
Light and dark themes with custom background and column layout controls.
Used by Ant Design sites and ecosystem pages.

Install

npm install @rc-component/footer

rc-footer is the legacy package name. New releases should use the scoped @rc-component/footer package.

Usage

import Footer from '@rc-component/footer';
import '@rc-component/footer/assets/index.css';

export default () => (
  <Footer
    columns={[
      {
        title: 'Resources',
        items: [
          {
            title: 'Ant Design',
            url: 'https://ant.design',
            openExternal: true,
          },
          {
            title: 'Ant Design Pro',
            url: 'https://pro.ant.design',
            openExternal: true,
          },
        ],
      },
      {
        title: 'Community',
        items: [
          {
            title: 'GitHub',
            url: 'https://github.com/ant-design/ant-design',
            openExternal: true,
          },
        ],
      },
    ]}
    bottom="Made with care by Ant Design"
  />
);

Examples

Run the local dumi site:

npm install
npm start

Then open http://localhost:8000.

API

Footer

Property	Type	Default	Description
backgroundColor	string	`#000`	Background color of footer
bottom	ReactNode	-	Extra bottom area beneath footer columns
className	string	`''`	Additional class name of footer
columnLayout	`space-around` \| `space-between`	`space-around`	`justify-content` value of columns element
columns	Column[]	`[]`	Columns data inside footer
maxColumnsPerRow	number	-	Max count of columns for each row
prefixCls	string	`rc-footer`	CSS class prefix
style	React.CSSProperties	-	Style properties of footer
theme	`light` \| `dark`	`dark`	Preset theme of footer

Column

Property	Type	Default	Description
className	string	`''`	Additional class name of column
icon	ReactNode	-	Icon before the column title
items	ColumnItem[]	`[]`	Items data inside each column
style	React.CSSProperties	-	Style properties of column
title	ReactNode	-	Title of column

ColumnItem

Property	Type	Default	Description
LinkComponent	React.ElementType	`a`	Link element used to render the item
className	string	`''`	Additional class name of item
description	ReactNode	-	Description displayed after title
icon	ReactNode	-	Icon before item title
openExternal	boolean	false	Open link in a new tab
style	React.CSSProperties	-	Style properties of item
title	ReactNode	-	Title of item
url	string	-	Link URL of item title

Development

npm install
npm start

The dumi site runs at http://localhost:8000 by default.

Useful checks:

npm run lint
npm run tsc
npm test
npm run build
npm run compile

Release

npm run prepublishOnly

The release flow is handled by @rc-component/np through the rc-np command after the package build.

License

@rc-component/footer is released under the MIT license.