Skip to content

react-component/footer

Repository files navigation

rc-footer 🐾

NPM version npm download build status Codecov bundle size dumi

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

Live Demo

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

Install

rc-footer

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

Development

npm install
npm start

License

rc-footer is released under the MIT license.