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

// App.css
.bg-red{
   padding: 2rem;
   background-color: red;
}

.bg-pink{
   background-color: pink;
}


// App.jsx
import { Statistics } from "react-hartan"

function App() {

  return (
    <>
      <Statistics userStatsBlocksStyle={"bg-red"} userStatsContentStyle={"bg-pink"}></Statistics>
    </>
  )
}

export default App

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

/*  Statistics Styling */

/* statistics section container */
.statistics {
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: 5rem;
    padding: 1rem 5rem;
}

/* statistics div container */
.abtStats {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    gap: 5rem;
}

.abtStats div h1 {
    font-size: 3rem;
}

.abtStats div p {
    font-size: 1.3rem;
    font-weight: 500;
    color: #6b6868;
}

/* statistics data container */
.statsBlocks {
    display: flex;
    justify-content: space-around;
    gap: 1rem;
    flex-wrap: wrap;
    width: 100%;
}

.statsBlocks div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.statsBlocks div h2 {
    font-size: 2rem;
}

/* Responsive Design */
@media (max-width:1024px) {
    .statistics {
        flex-direction: column;
    }
}

@media (max-width: 768px) {

    .abtStats {
        flex-direction: column;
    }

    .statistics figure img {
        height: 20rem;
    }
}

@media (max-width: 460px) {
    .statistics figure img {
        height: 10rem;
    }
}