Merge pull request #96 from haensl/95

#95: Add useLang hook.

Author: haensl

CHANGELOG.md

@@ -1,3 +1,7 @@
+## 1.13.0
+* [#95: Add `useLang` hook.](https://github.com/haensl/hooks/issues/95)
+* Update dependencies.
+
 ## 1.12.2
 * [#93: Update dependencies.](https://github.com/haensl/hooks/issues/93)
 

README.md

@@ -53,6 +53,7 @@ const DebouncedButton = () => {
 * [`useIsMounted`](#useIsMounted): keep track of whether or not a component is mounted.
 * [`useIsomorphicLayoutEffect`](#useIsomorphicLayoutEffect): use this instead of [`useLayoutEffect`](https://reactjs.org/docs/hooks-reference.html#uselayouteffect) if your app uses serverside rendering (SSR).
 * [`useIsScrolling`](#useIsScrolling): keep track of whether or not the user is scrolling.
+* [`useLang`](#useLang): use the browser's language setting.
 * [`useOnScroll`](#useOnScroll): subscribe to scroll events.
 * [`usePrevious`](#usePrevious): keep track of a variable's previous value.
 * [`useWindowScroll`](#useWindowScroll): keep track of the `window`'s scroll position.
@@ -293,7 +294,7 @@ const MyComponent = () => {
 
 Returns a `boolean` indicating whether or not the user is scrolling. You can subscribe to a specific element via the first argument, `el` _(default: `window`)_. End of scrolling is determined by no incoming scroll events for `scrollEndMs` milliseconds _(default: `100`)_. Please check the [example blow](#useIsScrollingExample) as well as the [Codepen example](https://codepen.io/haensl/pen/qBbqeWz)
 
-##### Example<a name=useIsScrollingExample></a>
+##### Example<a name="useIsScrollingExample"></a>
 
 ```javascript
 import React from 'react';
@@ -310,6 +311,25 @@ const UserScrollTracker = () => {
 
 #### [→ Codepen example](https://codepen.io/haensl/pen/qBbqeWz)
 
+### `useLang({ defaultLang = 'en' }) => string` <a name="useLang"></a>
+
+Returns the user's language setting from [`navigator.language`](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/language). Use the `defaultLang` of the options parameter to set a default language. _(default: `'en`)_.
+
+##### Example <a name="useLangExample"></a>
+
+```javascript
+import React from 'react';
+import { useLang } from '@haensl/react-hooks';
+
+const MyComponent = () => {
+  const lang = useLang();
+
+  return (
+    <span>The user's preferred language is { lang }.</span>
+  );
+};
+```
+
 ### `useOnScroll(fn, [el = window])` <a name="useOnScroll"></a>
 
 Subscribes to [`scroll`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scroll_event) events on the given element `el` _(default: `window`)_. The callback function `fn` is passed the [`Event`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scroll_event). Please check the [example below](#useOnScrollExample) as well as the [Codepen example](https://codepen.io/haensl/pen/wvMoLJK).

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@haensl/react-hooks",
-  "version": "1.12.2",
+  "version": "1.13.0",
   "description": "Assorted React hooks.",
   "main": "dist/hooks.cjs.js",
   "module": "dist/hooks.esm.js",
@@ -130,6 +130,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.12.10",
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@babel/plugin-transform-runtime": "^7.12.10",
     "@babel/preset-env": "^7.12.11",
     "@babel/preset-react": "^7.14.5",

package.json

@@ -6,6 +6,7 @@ import _useInterval from './useInterval';
 import _useIsMounted from './useIsMounted';
 import _useIsomorphicLayoutEffect from './useIsomorphicLayoutEffect';
 import _useIsScrolling from './useIsScrolling';
+import _useLang from './useLang';
 import _useOnScroll from './useOnScroll';
 import _usePrevious from './usePrevious';
 import _useWindowScroll from './useWindowScroll';
@@ -19,6 +20,7 @@ export const useInterval = _useInterval;
 export const useIsMounted = _useIsMounted;
 export const useIsomorphicLayoutEffect = _useIsomorphicLayoutEffect;
 export const useIsScrolling = _useIsScrolling;
+export const useLang = _useLang;
 export const useOnScroll = _useOnScroll;
 export const usePrevious = _usePrevious;
 export const useWindowScroll = _useWindowScroll;
@@ -33,6 +35,7 @@ const exports = {
   useIsMounted,
   useIsomorphicLayoutEffect,
   useIsScrolling,
+  useLang,
   useOnScroll,
   usePrevious,
   useWindowScroll,

src/index.js

@@ -11,6 +11,7 @@ import {
   useIsMounted,
   useIsomorphicLayoutEffect,
   useIsScrolling,
+  useLang,
   useOnScroll,
   usePrevious,
   useWindowScroll,
@@ -206,6 +207,28 @@ describe('cjs module test', () => {
     });
   });
 
+  describe('useLang', () => {
+    let TestComponent;
+
+    beforeAll(() => {
+      TestComponent = () => {
+        const lang = useLang();
+
+        return (
+          <span>useLang test. { lang }</span>
+        );
+      };
+    });
+
+    it('renders without crashing', () => {
+      ReactDOM.render(
+        <TestComponent />,
+        container
+      );
+      ReactDOM.unmountComponentAtNode(container);
+    });
+  });
+
   describe('useWindowScroll', () => {
     let TestComponent;
 

src/package-tests/cjs/cjs.test.js

@@ -11,6 +11,7 @@ import {
   useIsMounted,
   useIsomorphicLayoutEffect,
   useIsScrolling,
+  useLang,
   useOnScroll,
   usePrevious,
   useWindowScroll,
@@ -206,6 +207,26 @@ describe('esm module test', () => {
     });
   });
 
+  describe('useLang', () => {
+    let TestComponent;
+
+    beforeAll(() => {
+      TestComponent = () => {
+        const lang = useLang();
+
+        return (
+          <span>useIsLang test. { lang }</span>
+        );
+      };
+    });
+
+    it('renders without crashing', () => {
+      expect(render.bind(render, <TestComponent />))
+        .not
+        .toThrow();
+    });
+  });
+
   describe('useWindowScroll', () => {
     let TestComponent;
 

src/package-tests/esm/esm.test.js

@@ -0,0 +1,9 @@
+const useLang = ({ defaultLang = 'en' } = {}) => {
+  if (typeof navigator === 'object') {
+    return (navigator.language || navigator.userLanguage || defaultLang).slice(0, 2);
+  }
+
+  return defaultLang;
+};
+
+export default useLang;

src/useLang/index.js

@@ -0,0 +1,55 @@
+import { renderHook } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
+import useLang from './';
+
+describe('useLang', () => {
+  test('renders without crashing', () => {
+    const { result } = renderHook(() => useLang());
+    expect(result.error)
+      .not
+      .toBeDefined();
+  });
+
+  describe('defaultLang', () => {
+    let spy;
+    beforeEach(() => {
+      spy = jest.spyOn(navigator, 'language', 'get')
+        .mockReturnValue(null);
+    });
+
+    afterEach(() => {
+      spy.mockRestore();
+    });
+
+    it('defaults to "en"', () => {
+      const { result } = renderHook(() => useLang());
+      expect(result.current)
+        .toEqual('en');
+    });
+
+    it('can be set', () => {
+      const { result } = renderHook(() => useLang({ defaultLang: 'de' }));
+      expect(result.current)
+        .toEqual('de');
+    });
+  });
+
+  describe('if navigator is available', () => {
+    let spy;
+    beforeEach(() => {
+      spy = jest.spyOn(navigator, 'language', 'get')
+        .mockReturnValue('fr');
+    });
+
+    afterEach(() => {
+      spy.mockRestore();
+    });
+
+    test('takes lang from the navigator', () => {
+      const { result } = renderHook(() => useLang());
+      expect(result.current)
+        .toEqual('fr');
+    });
+  });
+});