next-formatter 2.0.6 → 2.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/README.md +23 -7
  2. package/dist/cjs/client.js +7 -7
  3. package/dist/cjs/server.js +2 -2
  4. package/dist/esm/client.mjs +7 -7
  5. package/dist/esm/server.mjs +2 -2
  6. package/dist/types/client.d.ts +6 -7
  7. package/dist/types/core.d.ts +2 -2
  8. package/package.json +1 -1
package/README.md CHANGED
@@ -1,6 +1,6 @@
1
1
  # next-formatter
2
2
 
3
- Universal number, currency, date, and relative time formatter for Next.js App Router — works in both **Server Components** and **Client Components** with zero hydration mismatches.
3
+ A universal formatter for numbers, currency, dates, and relative time - built for Next.js App Router, supporting **server components**, **client components**, and **Node.js backends**.
4
4
 
5
5
  [→ View Full Documentation](https://gauravgorade.github.io/next-formatter/)
6
6
 
@@ -32,20 +32,36 @@ export const getFormatter = () => _getFormatter(config);
32
32
 
33
33
  ## 1. Add the Provider
34
34
 
35
- Add `NextFormatterProvider` to your root layout.
35
+ Create a client wrapper component and add it to your root layout.
36
36
 
37
- **app/layout.tsx**
37
+ **app/providers/formatter-provider.tsx**
38
38
  ```tsx
39
- import { NextFormatterProvider } from "next-formatter/server";
39
+ "use client";
40
+
41
+ import { FormatterProvider } from "next-formatter/client";
40
42
  import { formatterConfig } from "@/lib/formatter";
43
+ import { ReactNode } from "react";
44
+
45
+ export function AppFormatterProvider({ children }: { children: ReactNode }) {
46
+ return (
47
+ <FormatterProvider config={formatterConfig}>
48
+ {children}
49
+ </FormatterProvider>
50
+ );
51
+ }
52
+ ```
53
+
54
+ **app/layout.tsx**
55
+ ```tsx
56
+ import { AppFormatterProvider } from "@/app/providers/formatter-provider";
41
57
 
42
- export default async function RootLayout({ children }) {
58
+ export default function RootLayout({ children }: { children: React.ReactNode }) {
43
59
  return (
44
60
  <html lang="en">
45
61
  <body>
46
- <NextFormatterProvider config={formatterConfig}>
62
+ <AppFormatterProvider>
47
63
  {children}
48
- </NextFormatterProvider>
64
+ </AppFormatterProvider>
49
65
  </body>
50
66
  </html>
51
67
  );
package/dist/cjs/client.js CHANGED
@@ -21,7 +21,7 @@ var DEFAULT_RULES = {
21
21
  hour12: true
22
22
  }
23
23
  };
24
- function createFormatters(config = {}) {
24
+ function createFormatter(config = {}) {
25
25
  const locale = config.locale ?? "en-US";
26
26
  const defaultCurrency = config.currency ?? "USD";
27
27
  const fallback = config.fallback ?? "\u2014";
@@ -199,23 +199,23 @@ function createFormatters(config = {}) {
199
199
  return formatters;
200
200
  }
201
201
  var FormatterContext = react.createContext(null);
202
- function FormattersProvider({ config, children }) {
203
- const formatters = react.useMemo(
204
- () => createFormatters(config),
202
+ function FormatterProvider({ config, children }) {
203
+ const formatter = react.useMemo(
204
+ () => createFormatter(config),
205
205
  // eslint-disable-next-line react-hooks/exhaustive-deps
206
206
  [config.locale, config.currency, config.fallback, JSON.stringify(config.rules)]
207
207
  );
208
- return /* @__PURE__ */ jsxRuntime.jsx(FormatterContext.Provider, { value: formatters, children });
208
+ return /* @__PURE__ */ jsxRuntime.jsx(FormatterContext.Provider, { value: formatter, children });
209
209
  }
210
210
  function useFormatter() {
211
211
  const ctx = react.useContext(FormatterContext);
212
212
  if (!ctx) {
213
213
  throw new Error(
214
- "[next-formatter] useFormatter() must be used inside <NextFormatterProvider />.\nMake sure you have <NextFormatterProvider> in your root layout."
214
+ "[next-formatter] useFormatter() must be used inside <FormatterProvider />.\nMake sure you have <FormatterProvider> in your root layout."
215
215
  );
216
216
  }
217
217
  return ctx;
218
218
  }
219
219
 
220
- exports.FormattersProvider = FormattersProvider;
220
+ exports.FormatterProvider = FormatterProvider;
221
221
  exports.useFormatter = useFormatter;
package/dist/cjs/server.js CHANGED
@@ -17,7 +17,7 @@ var DEFAULT_RULES = {
17
17
  hour12: true
18
18
  }
19
19
  };
20
- function createFormatters(config = {}) {
20
+ function createFormatter(config = {}) {
21
21
  const locale = config.locale ?? "en-US";
22
22
  const defaultCurrency = config.currency ?? "USD";
23
23
  const fallback = config.fallback ?? "\u2014";
@@ -222,7 +222,7 @@ async function resolveCurrency(resolver, defaultCurrency) {
222
222
  async function getFormatter(config = {}) {
223
223
  const locale = await resolveLocale(config.getLocale, config.locale);
224
224
  const currency = await resolveCurrency(config.getCurrency, config.currency);
225
- return createFormatters({
225
+ return createFormatter({
226
226
  locale,
227
227
  currency,
228
228
  fallback: config.fallback,
package/dist/esm/client.mjs CHANGED
@@ -19,7 +19,7 @@ var DEFAULT_RULES = {
19
19
  hour12: true
20
20
  }
21
21
  };
22
- function createFormatters(config = {}) {
22
+ function createFormatter(config = {}) {
23
23
  const locale = config.locale ?? "en-US";
24
24
  const defaultCurrency = config.currency ?? "USD";
25
25
  const fallback = config.fallback ?? "\u2014";
@@ -197,22 +197,22 @@ function createFormatters(config = {}) {
197
197
  return formatters;
198
198
  }
199
199
  var FormatterContext = createContext(null);
200
- function FormattersProvider({ config, children }) {
201
- const formatters = useMemo(
202
- () => createFormatters(config),
200
+ function FormatterProvider({ config, children }) {
201
+ const formatter = useMemo(
202
+ () => createFormatter(config),
203
203
  // eslint-disable-next-line react-hooks/exhaustive-deps
204
204
  [config.locale, config.currency, config.fallback, JSON.stringify(config.rules)]
205
205
  );
206
- return /* @__PURE__ */ jsx(FormatterContext.Provider, { value: formatters, children });
206
+ return /* @__PURE__ */ jsx(FormatterContext.Provider, { value: formatter, children });
207
207
  }
208
208
  function useFormatter() {
209
209
  const ctx = useContext(FormatterContext);
210
210
  if (!ctx) {
211
211
  throw new Error(
212
- "[next-formatter] useFormatter() must be used inside <NextFormatterProvider />.\nMake sure you have <NextFormatterProvider> in your root layout."
212
+ "[next-formatter] useFormatter() must be used inside <FormatterProvider />.\nMake sure you have <FormatterProvider> in your root layout."
213
213
  );
214
214
  }
215
215
  return ctx;
216
216
  }
217
217
 
218
- export { FormattersProvider, useFormatter };
218
+ export { FormatterProvider, useFormatter };
package/dist/esm/server.mjs CHANGED
@@ -15,7 +15,7 @@ var DEFAULT_RULES = {
15
15
  hour12: true
16
16
  }
17
17
  };
18
- function createFormatters(config = {}) {
18
+ function createFormatter(config = {}) {
19
19
  const locale = config.locale ?? "en-US";
20
20
  const defaultCurrency = config.currency ?? "USD";
21
21
  const fallback = config.fallback ?? "\u2014";
@@ -220,7 +220,7 @@ async function resolveCurrency(resolver, defaultCurrency) {
220
220
  async function getFormatter(config = {}) {
221
221
  const locale = await resolveLocale(config.getLocale, config.locale);
222
222
  const currency = await resolveCurrency(config.getCurrency, config.currency);
223
- return createFormatters({
223
+ return createFormatter({
224
224
  locale,
225
225
  currency,
226
226
  fallback: config.fallback,
package/dist/types/client.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import { type PropsWithChildren } from "react";
2
2
  import { type Formatter, type FormatterConfig } from "./core";
3
- interface FormattersProviderProps {
3
+ interface FormatterProviderProps {
4
4
  config: FormatterConfig;
5
5
  }
6
6
  /**
@@ -9,16 +9,15 @@ interface FormattersProviderProps {
9
9
  *
10
10
  * @example
11
11
  * // layout.tsx
12
- * import { FormattersProvider } from "next-formatter/client";
12
+ * import { FormatterProvider } from "next-formatter/client";
13
13
  *
14
- * <FormattersProvider config={{ locale: "en-US", currency: "USD" }}>
14
+ * <FormatterProvider config={{ locale: "en-US", currency: "USD" }}>
15
15
  * {children}
16
- * </FormattersProvider>
16
+ * </FormatterProvider>
17
17
  */
18
- export declare function FormattersProvider({ config, children }: PropsWithChildren<FormattersProviderProps>): import("react/jsx-runtime").JSX.Element;
18
+ export declare function FormatterProvider({ config, children }: PropsWithChildren<FormatterProviderProps>): import("react/jsx-runtime").JSX.Element;
19
19
  /**
20
- * Returns all formatters inside any Client Component.
21
- * Must be used inside `<NextFormatterProvider>` or `<FormattersProvider>`.
20
+ * Must be used inside `<FormatterProvider>`.
22
21
  *
23
22
  * @example
24
23
  * "use client";
package/dist/types/core.d.ts CHANGED
@@ -41,7 +41,7 @@ export type FormatterConfig = {
41
41
  fallback?: string;
42
42
  rules?: FormatterRules;
43
43
  };
44
- export declare function createFormatters(config?: FormatterConfig): {
44
+ export declare function createFormatter(config?: FormatterConfig): {
45
45
  /**
46
46
  * Format a plain number.
47
47
  * @example
@@ -95,4 +95,4 @@ export declare function createFormatters(config?: FormatterConfig): {
95
95
  */
96
96
  relativeTime(value: DateInput, now?: number): string;
97
97
  };
98
- export type Formatter = ReturnType<typeof createFormatters>;
98
+ export type Formatter = ReturnType<typeof createFormatter>;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "next-formatter",
3
- "version": "2.0.6",
3
+ "version": "2.2.1",
4
4
  "description": "A universal formatter for numbers, currency, dates, and relative time — built for Next.js App Router, supporting server components, client components, and Node.js backends.",
5
5
  "author": "gauravgorade",
6
6
  "license": "MIT",