Enhancement: useI18n hook (#195)

* useI18n hook

* size limit increase

Author: dangreen

.size-limit

@@ -1,17 +1,17 @@
 [
 	{
 		"path": "lib/index.js",
-		"limit": "3 KB",
+		"limit": "3.1 KB",
 		"webpack": false
 	},
 	{
 		"path": "lib/index.es.js",
-		"limit": "2.6 KB",
+		"limit": "2.7 KB",
 		"webpack": false
 	},
 	{
 		"path": "lib/index.babel.js",
-		"limit": "1.9 KB",
+		"limit": "1.95 KB",
 		"webpack": false
 	}
 ]

CHANGELOG.md

@@ -24,6 +24,13 @@ DO NOT TOUCH. SAVE IT ON TOP.
 
 -->
 
+## [4.1.0] - 2020-10-18
+### Added
+- `useI18n` hook as part of `createI18nProvider` result.
+
+## Removed
+- `createI18nHook` method.
+
 ## [4.0.0] - 2020-10-02
 ### Changed
 - Moved from component API to hooks.

README.md

@@ -78,7 +78,11 @@ const {
     /**
      * Context with config and methods.
      */
-    I18nContext
+    I18nContext,
+    /**
+     * Hook to recieve config and methods.
+     */
+    useI18n
 } = createI18nProvider(
     /**
      * Methods for binding and providing.
@@ -99,32 +103,6 @@ const {
 
 </details>
 
-### [createI18nHook](https://trigensoftware.github.io/i18n-for-react/modules/_src_createi18nprovider_.html#createi18nhook)
-
-Create hook from context.
-
-<details>
-    <summary>Usage example</summary>
-
-```js
-/**
- * Basic example 
- */
-const useI18n = createI18nHook(I18nContext);
-/**
- * Then you can use this hook
- */
-function SomeComponent() {
-    const {
-        __
-    } = useI18n();
-
-    return __`cat`;
-}
-```
-
-</details>
-
 ### [I18nProvider](https://trigensoftware.github.io/i18n-for-react/modules/_src_createi18nprovider_.html#createi18nprovider)
 
 Configurator and provider of `i18n` instance.
@@ -169,6 +147,40 @@ Configurator and provider of `i18n` instance.
 
 </details>
 
+### [useI18n](https://trigensoftware.github.io/i18n-for-react/modules/_src_createi18nprovider_.html#createi18nprovider)
+
+Hook to recieve config and methods.
+
+<details>
+    <summary>Usage example</summary>
+
+```js
+/**
+ * Basic example 
+ */
+function SomeComponent() {
+    const {
+        __
+    } = useI18n();
+
+    return __`cat`;
+}
+/**
+ * Fork instance
+ */
+function SomeComponent() {
+    const {
+        __
+    } = useI18n({
+        locales: /* ... */
+    });
+
+    return __`cat`;
+}
+```
+
+</details>
+
 ### [rprintf()](https://trigensoftware.github.io/i18n-for-react/modules/_src_rprintf_.html#rprintf)
 
 Format string with wrappers.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "i18n-for-react",
-  "version": "4.0.0",
+  "version": "4.1.0",
   "description": "Modern translation module for React.",
   "author": "dangreen",
   "license": "MIT",

src/createI18nProvider.tsx

@@ -1,5 +1,4 @@
 import React, {
-	Context,
 	createContext,
 	useContext,
 	useMemo,
@@ -21,7 +20,7 @@ import {
  * Create i18n provider with given methods.
  * @param methods - I18n methods.
  * @param config - Default config.
- * @returns Provider.
+ * @returns Provider, context, and hook.
  */
 export function createI18nProvider<
 	TMethods extends I18nMethods = I18nMethods
@@ -33,15 +32,12 @@ export function createI18nProvider<
 	const I18nContext = createContext<I18nContextPayload<TMethods>>(null);
 	const useI18nParentInstance = ({
 		context
-	}: I18nProviderProps) => {
+	}: Partial<I18nProviderProps>) => {
 		const parentContext = useContext(I18nContext);
 
 		return context || parentContext && parentContext.config;
 	};
-	const I18nProvider = memo((props: I18nProviderProps) => {
-		const {
-			children
-		} = props;
+	const useI18nContextPayload = (props: Partial<I18nProviderProps>) => {
 		const i18nParentInstance = useI18nParentInstance(props);
 		const instanceProps = i18nParentInstance ? props : { ...config, ...props };
 		const i18nInstance = useI18nInstance(instanceProps, i18nParentInstance);
@@ -50,29 +46,47 @@ export function createI18nProvider<
 			[i18nInstance]
 		);
 
+		return payload;
+	};
+	const I18nProvider = memo((props: I18nProviderProps) => {
+		const {
+			children
+		} = props;
+		const payload = useI18nContextPayload(props);
+
 		return (
 			<I18nContext.Provider value={payload}>
 				{children}
 			</I18nContext.Provider>
 		);
 	});
+	const useI18n = (config?: I18nProviderConfig) => {
+		const withConfigRef = useRef(Boolean(config));
+
+		if (withConfigRef.current) {
+			return useI18nContextPayload(config);
+		}
+
+		return useContext(I18nContext);
+	};
 
 	return {
+		/**
+		 * Config and methods provider.
+		 */
 		I18nProvider,
-		I18nContext
+		/**
+		 * Context with config and methods.
+		 */
+		I18nContext,
+		/**
+		 * Hook to recieve config and methods.
+		 */
+		useI18n
 	};
 }
 
-/**
- * Create i18n hook from given context.
- * @param context - I18n context.
- * @returns Hook function.
- */
-export function createI18nHook<T extends I18nMethods>(context: Context<I18nContextPayload<T>>) {
-	return () => useContext(context);
-}
-
-function useI18nInstance(props: I18nProviderProps, i18nParentInstance: I18nConfigInstance) {
+function useI18nInstance(props: Partial<I18nProviderProps>, i18nParentInstance: I18nConfigInstance) {
 	const {
 		locale,
 		locales,
@@ -123,7 +137,7 @@ function createI18nInstance(
 		context,
 		children,
 		...config
-	}: I18nProviderProps,
+	}: Partial<I18nProviderProps>,
 	i18nParentInstance: I18nConfigInstance
 ) {
 	const configWithLocale = typeof locale === 'string'

test/lib.spec.tsx

@@ -8,7 +8,6 @@ import Enzyme, {
 import {
 	I18nConfig,
 	createI18nProvider,
-	createI18nHook,
 	__,
 	__x
 } from '../src';
@@ -33,12 +32,12 @@ const CONFIG: I18nConfig = {
 describe('i18n-for-react', () => {
 	const {
 		I18nProvider,
-		I18nContext
+		I18nContext,
+		useI18n
 	} = createI18nProvider({
 		__,
 		__x
 	}, CONFIG);
-	const useI18n = createI18nHook(I18nContext);
 
 	it('should translate phrase from global context', () => {
 		const wrapper = mount(
@@ -179,7 +178,6 @@ describe('i18n-for-react', () => {
 				</>
 			);
 		};
-
 		const wrapper = mount(
 			<I18nProvider>
 				<Text />
@@ -188,4 +186,51 @@ describe('i18n-for-react', () => {
 
 		expect(wrapper.html()).toBe('Hello');
 	});
+
+	it('should create instance by hook', () => {
+		const Text = () => {
+			const {
+				__
+			} = useI18n(CONFIG);
+
+			return (
+				<>
+					{__`hi`}
+				</>
+			);
+		};
+		const wrapper = mount(
+			<Text />
+		);
+
+		expect(wrapper.html()).toBe('Hello');
+	});
+
+	it('should fork instance by hook', () => {
+		const subconfig = {
+			locales: {
+				en: {
+					'hi': 'sup'
+				}
+			}
+		};
+		const Text = () => {
+			const {
+				__
+			} = useI18n(subconfig);
+
+			return (
+				<>
+					{__`hi`}
+				</>
+			);
+		};
+		const wrapper = mount(
+			<I18nProvider>
+				<Text />
+			</I18nProvider>
+		);
+
+		expect(wrapper.html()).toBe('sup');
+	});
 });