add a context provider for specifying options

CHANGELOG.md

@@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Support old versions of react (pre v16.14)
 - Prefer idiomatic phrasing by default (use `numeric: 'always'` for the old behaviour)
+- Added a context provider to allow default options to be specified
 
 ## 2.0.0 (2024-02-09)
 

src/__tests__/index.test.tsx

@@ -1,7 +1,11 @@
 import { assert, vi } from "vitest";
 import { render, screen } from "@testing-library/react";
 import "@testing-library/jest-dom";
-import TimeAgo, { TimeAgoProps } from "../index.js";
+import TimeAgo, {
+  type TimeAgoOptions,
+  type TimeAgoProps,
+  TimeAgoProvider,
+} from "../index.js";
 
 function setup(props: TimeAgoProps) {
   render(
@@ -132,3 +136,34 @@ describe("TimeAgo", () => {
     );
   });
 });
+
+describe("TimeAgoProvider", () => {
+  function setupWithProvider(
+    props: TimeAgoProps,
+    providerProps: TimeAgoOptions
+  ) {
+    render(
+      <TimeAgoProvider {...providerProps}>
+        <div role="main">
+          <TimeAgo {...props} />
+        </div>
+      </TimeAgoProvider>
+    );
+    return screen.getByRole("main");
+  }
+
+  it("uses options from the context provider", () => {
+    expect(
+      setupWithProvider({ date: "2023" }, { locale: "ru-Cyrl-RU" })
+    ).toHaveTextContent("5 месяцев назад");
+  });
+
+  it("prefers props over values from the context provider", () => {
+    expect(
+      setupWithProvider(
+        { date: "2023", locale: "it-CH" },
+        { locale: "ru-Cyrl-RU" }
+      )
+    ).toHaveTextContent("5 mesi fa");
+  });
+});

src/index.ts

@@ -1,7 +1,10 @@
 import {
+  PropsWithChildren,
+  createContext,
   createElement,
   memo,
   useCallback,
+  useContext,
   useEffect,
   useMemo,
   useState,
@@ -63,15 +66,34 @@ export type TimeAgoProps = {
   timeElement?: boolean;
 };
 
+export type TimeAgoOptions = Omit<TimeAgoProps, "date">;
+
+const Context = createContext<TimeAgoOptions | undefined>(undefined);
+
+/**
+ * This context provider allows you specify defaults for
+ * all options.
+ */
+export const TimeAgoProvider: React.FC<TimeAgoOptions & PropsWithChildren> = ({
+  children,
+  ...props
+}) => createElement(Context.Provider, { value: props }, children);
+
 const TimeAgo = memo<TimeAgoProps>(
-  ({
-    date,
-    locale = navigator.language,
-    formatOptions,
-    hideSeconds = true,
-    roundStrategy = "round",
-    timeElement = true,
-  }) => {
+  //
+  (props) => {
+    const {
+      date,
+      locale = navigator.language,
+      formatOptions,
+      hideSeconds = true,
+      roundStrategy = "round",
+      timeElement = true,
+    } = {
+      ...useContext(Context),
+      ...props,
+    };
+
     const [text, setText] = useState("");
     const [unit, setUnit] = useState<Unit>();