Statistics

Statistics section provides the data related to the visiting website and its related projects.

Preview

Usage

npm i react-hartan

import { Statistics } from "react-hartan"

function App() {

  return (
    <>
      <Statistics></Statistics>
    </>
  )
}

export default App

Customization With Props

• statsBlockData -> Accepts an array of objects, where each element has the following structure:

{
    head: "", 
    data: "",
}

NOTE: Keep the keys of the object same as above.

• statisticsHeading -> Accepts a string value, used as the section heading.

• statisticsHeadingAbout -> Accepts a string value, used as the section paragraph content.

• imgSrc -> Accepts a string value, source link for the image shown in the statistics section.

• imgState -> Accepts a boolean value, to show or hide the image based on user input.

• imgAlt-> Accepts an image alt.

• id -> The id prop is similar to the id attribute in HTML. It allows to provide overall component id.

• imgLoad -> The imgLoad prop is mapped to the loading attribute in HTML img tag. It allows to provide overall the value for loading attribute, "lazy" | "eager".

• userStatisticsStyle -> Accepts class name(s) as string, custom styling prop for the full section container.

• userStatsContentStyle -> Accepts class name(s) as string, custom styling prop for the container containing heading, paragraph and statistics data content.

• userStatsBlocksStyle -> Accepts class name(s) as string, custom styling prop for the container containing statistics data.

Default

import { Statistics } from "react-hartan"

function App() {

  return (
    <>
      <Statistics></Statistics>
    </>
  )
}

export default App

With Custom Props

Component Code

This is the code for the Statistics component.

Statistics.jsx

import statisticsStyle from "./Statistics.module.css"
import PropTypes from "prop-types"

const list = [
    {
        head: "Users",
        data: "2.7K"
    },
    {
        head: "Subscribers",
        data: "2.1K"
    },
    {
        head: "Downloads",
        data: "45+"
    },
    {
        head: "Products",
        data: "5+"
    },
];

export default function Statistics({ statsBlockData = list, statisticsHeading = "Hartan", statisticsHeadingAbout = "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Praesentium libero architecto ipsum nostrum impedit similique neque mollitia dolores quasi autem cum ea, quas aspernatur? Deserunt.", imgSrc = "https://dummyimage.com/500x250", imgState = true, imgAlt= "Hartan", id, imgLoad, userStatisticsStyle, userStatsContentStyle, userStatsBlocksStyle }) {

    return (
        <section className={`${statisticsStyle.statistics} ${userStatisticsStyle}`}>
            <div className={`${statisticsStyle.abtStats} ${userStatsContentStyle}`}>
                <div>
                    <h1>{statisticsHeading}</h1>
                    <p>{statisticsHeadingAbout}</p>
                </div>
                <div className={`${statisticsStyle.statsBlocks} ${userStatsBlocksStyle}`}>
                    {
                        statsBlockData.map((item, id) => {
                            return (
                                <div key={id}>
                                    <h2>{item.data}</h2>
                                    <p>{item.head}</p>
                                </div>
                            )
                        })
                    }
                </div>
            </div>

            {
                imgState &&
                <figure>
                    <img src={imgSrc} alt={imgAlt} loading={imgLoad}/>
                </figure>
            }

        </section>
    )
}

Statistics.propTypes = {
    statsBlockData: PropTypes.arrayOf(PropTypes.shape({
        head: PropTypes.node,
        data: PropTypes.node
    })),
    statisticsHeading: PropTypes.node,
    statisticsHeadingAbout: PropTypes.node,
    imgSrc: PropTypes.string,
    imgState: PropTypes.bool,
    imgAlt: PropTypes.string,
    id: PropTypes.string,
    userStatisticsStyle: PropTypes.string,
    userStatsContentStyle: PropTypes.string,
    userStatsBlocksStyle: PropTypes.string
};

Statistics.module.css