Rc-footer NPM | npm.io

rc-footer 🐾

Pretty Footer react component used in ant.design and antv.vision.

npm.io

Live Demo

https://react-component.github.io/footer/

Install

Usage

import Footer from 'rc-footer';
import 'rc-footer/assets/index.css'; // import 'rc-footer/asssets/index.less';
import { render } from 'react-dom';

render(
  <Footer
    columns={[
      {
        icon: (
          <img src="https://gw.alipayobjects.com/zos/rmsportal/XuVpGqBFxXplzvLjJBZB.svg" />
        ),
        title: '语雀',
        url: 'https://yuque.com',
        description: '知识创作与分享工具',
        openExternal: true,
      },
    ]}
    bottom="Made with ❤️ by AFX"
  />,
  mountNode,
);

API

Property	Type	Default	Description
prefixCls	string	rc-footer
className	string	''	additional class name of footer
style	React.CSSProperties		style properties of footer
columns	Column Array	[]	columns data inside footer
bottom	ReactNode		extra bottom area beneath footer columns
theme	'light' \| 'dark'	'dark'	preset theme of footer
backgroundColor	string	'#000'	background color of footer
columnLayout	'space-around' \| 'space-between'	'space-around'	justify-content value of columns element
maxColumnsPerRow	number	-	max count of columns for each row

Column

Property	Type	Default	Description
icon	ReactNode		icon that before column title
title	ReactNode		title of column
items	Item Array	[]	items data inside each column
className	string	''	additional class name of footer
style	React.CSSProperties		style properties of footer

Column Item

Property	Type	Default	Description
icon	ReactNode		icon that before column title
title	ReactNode		title of column
description	ReactNode		description of column, come after title
url	string		link url of item title
openExternal	boolean	false	link target would be `_blank` if `openExternal` is ture
className	string	''	additional class name of footer
style	React.CSSProperties		style properties of footer
LinkComponent	React.ReactType	'a'	the link element to render item