Wondering what’s next for npm?Check out our public roadmap! »

    rc-footer

    0.6.6 • Public • Published

    rc-footer 🐾

    NPM version npm download dumi build status Codecov Dependencies DevDependencies bundle size

    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' or '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.

    Install

    npm i rc-footer

    DownloadsWeekly Downloads

    1,663

    Version

    0.6.6

    License

    MIT

    Unpacked Size

    25.3 kB

    Total Files

    14

    Last publish

    Collaborators

    • avatar