react-full-year

react-full-year

react-full-year is a lightweight React component that fetches and displays the current year from an API. It supports all the props of a standard <p> tag and includes customizable loading options.

Features

• Fetches the current year dynamically from the API: https://getfullyear.com/api/year
• Supports all HTML <p> tag props for styling and attributes.
• Customizable loading states:
  • Display default loading text (Loading...).
  • Provide a custom loading component.
  • Disable loading display entirely.

Installation

Install the package using npm:

npm install react-full-year

Usage

Basic Example

import React from "react";
import { FullYear } from "react-full-year";

const App = () => {
  return (
    <div>
      <FullYear style={{ color: "blue", fontSize: "20px" }} />
    </div>
  );
};

export default App;

Custom Loading Component

import React from "react";
import { FullYear } from "react-full-year";

const App = () => {
  return (
    <div>
      <FullYear
        loadingComponent={<span>Fetching the year...</span>}
        style={{ fontSize: "18px", color: "green" }}
      />
    </div>
  );
};

export default App;

Disabling Loading Text

import React from "react";
import { FullYear } from "react-full-year";

const App = () => {
  return (
    <div>
      <FullYear showLoading={false} style={{ fontWeight: "bold" }} />
    </div>
  );
};

export default App;

Props

Prop	Type	Default	Description
showLoading	boolean	true	Whether to show default loading text (Loading...) while the year is being fetched.
loadingComponent	React.ReactNode	undefined	Custom component to display while loading. Overrides showLoading when provided.
...props	HTMLAttributes<HTMLPElement>	undefined	All standard <p> props, such as style, className, etc.

API Response Example

The year is fetched from the API https://getfullyear.com/api/year, which returns data in the following format:

{
  "year": 2025,
  "year_string": "2025",
  "sponsored_by": "Viagra: standing tall and proud"
}

Development

Clone the repository and install dependencies:

git clone https://github.com/akinloluwami/react-full-year.git
cd react-full-year
npm install

Build the package:

npm run build

Run the example:

npm start