Have ideas to improve npm?Join in the discussion! »

    simple-react-footer

    1.0.2 • Public • Published

    Simple React Footer

    Simple React Footer is an open-source React.js component. It is a ready to use footer for your React application.

    Preview

    mainFooter

    Smaller Screen

    smallerScreen

    Install

    npm install simple-react-footer
    

    Pass in your data as props

    Prop Type Description
    title String Required. This is the title for the first column. This is an ideal place for the company's name or "About" title.
    description String Required. This is the description about your company or any other text you would like to include in the footer. The recommended length is up to 450 characters.
    columns Array Optional. This is an array of column objects (defined below) for extra lists of resources. Each list has a title and link items
    linkedin String Optional. Linkedin name. Only include the actual name of the linkedin page. Ex: fluffycat
    facebook String Optional. Facebook name. Only include the actual name of the facebook page. Ex: catsfbpage
    instagram String Optional. Instagram name. Only include the actual name of the instagram page. Ex: fluffy_cat
    twitter String Optional. Twitter name. Only include the actual name of the twitter page. Ex: fluffy_cat_in_twitter
    youtube String Optional. Youtube name. Include your youtube channel's path after channel/. Ex: UCFt6TSF464J8K82xeA?
    pinterest String Optional. Pinterest name. Only include the actual name of the pinterest page. Ex: fluffy_cats_collections
    copyright String Required. This is the copyright name. This could be the company's name or developer's name(s)
    iconColor String Optional. This is the color of the social media icons. If not specified, the default color is black.
    backgroundColor String Optional. This is the color of the footer's background. If not specified, the default color is bisque.
    fontColor String Optional. This is the color of the font. If not specified, the default color is black.
    copyrightColor String Optional. This is the color of the copyright text. If not specified, the default color is grey.

    Column Object

    Prop Type Description
    title String Required. This is the title for the column.
    resources Array Required. This is an array of objects with name ank link for each list item.
    resources.name String Required. Parameter for the resource. This is the name of the list item.
    resources.link String Required. Parameter for the resource. This is the link for the link item.

    Render might look like this

    import SimpleReactFooter from "simple-react-footer";
    ...
    
    render() {
      const description = "According to wikipedia, the cat (Felis catus) is a domestic species of small carnivorous mammal. It is the only domesticated species in the family Felidae and is often referred to as the domestic cat to distinguish it from the wild members of the family. A cat can either be a house cat, a farm cat or a feral cat; the latter ranges freely and avoids human contact.";
      const title = "Cats";
      const columns = [
        {
            title: "Resources",
            resources: [
                {
                    name: "About",
                    link: "/about"
                },
                {
                    name: "Careers",
                    link: "/careers"
                },
                {
                    name: "Contact",
                    link: "/contact"
                },
                {
                    name: "Admin",
                    link: "/admin"
                }
            ]
        },
        {
            title: "Legal",
            resources: [
                {
                    name: "Privacy",
                    link: "/privacy"
                },
                {
                    name: "Terms",
                    link: "/terms"
                }
            ]
        },
        {
            title: "Visit",
            resources: [
                {
                    name: "Locations",
                    link: "/locations"
                },
                {
                    name: "Culture",
                    link: "/culture"
                }
            ]
        }
     ];
     return <SimpleReactFooter 
        description={description} 
        title={title}
        columns={columns}
        linkedin="fluffy_cat_on_linkedin"
        facebook="fluffy_cat_on_fb"
        twitter="fluffy_cat_on_twitter"
        instagram="fluffy_cat_live"
        youtube="UCFt6TSF464J8K82xeA?"
        pinterest="fluffy_cats_collections"
        copyright="black"
        iconColor="black"
        backgroundColor="bisque"
        fontColor="black"
        copyrightColor="darkgrey"
     />;
    };
    

    Install

    npm i simple-react-footer

    DownloadsWeekly Downloads

    115

    Version

    1.0.2

    License

    MIT

    Unpacked Size

    385 kB

    Total Files

    12

    Last publish

    Collaborators

    • avatar