rc-footer 🐾

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

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 |

Development

npm install
npm start

License

rc-footer is released under the MIT license.