refactor: named export and md without frontmatter

packages/usehooks-ts/src/index.ts

@@ -1,74 +1,37 @@
-export { default as useBoolean } from './useBoolean/useBoolean'
 export * from './useBoolean/useBoolean'
-export { default as useClickAnyWhere } from './useClickAnyWhere/useClickAnyWhere'
 export * from './useClickAnyWhere/useClickAnyWhere'
-export { default as useCopyToClipboard } from './useCopyToClipboard/useCopyToClipboard'
 export * from './useCopyToClipboard/useCopyToClipboard'
-export { default as useCountdown } from './useCountdown/useCountdown'
 export * from './useCountdown/useCountdown'
-export { default as useCounter } from './useCounter/useCounter'
 export * from './useCounter/useCounter'
-export { default as useDarkMode } from './useDarkMode/useDarkMode'
 export * from './useDarkMode/useDarkMode'
-export { default as useDebounce } from './useDebounce/useDebounce'
 export * from './useDebounce/useDebounce'
-export { default as useDocumentTitle } from './useDocumentTitle/useDocumentTitle'
 export * from './useDocumentTitle/useDocumentTitle'
-export { default as useEffectOnce } from './useEffectOnce/useEffectOnce'
 export * from './useEffectOnce/useEffectOnce'
-export { default as useElementSize } from './useElementSize/useElementSize'
 export * from './useElementSize/useElementSize'
-export { default as useEventCallback } from './useEventCallback/useEventCallback'
 export * from './useEventCallback/useEventCallback'
-export { default as useEventListener } from './useEventListener/useEventListener'
 export * from './useEventListener/useEventListener'
-export { default as useFetch } from './useFetch/useFetch'
 export * from './useFetch/useFetch'
-export { default as useHover } from './useHover/useHover'
 export * from './useHover/useHover'
-export { default as useImageOnLoad } from './useImageOnLoad/useImageOnLoad'
 export * from './useImageOnLoad/useImageOnLoad'
-export { default as useIntersectionObserver } from './useIntersectionObserver/useIntersectionObserver'
 export * from './useIntersectionObserver/useIntersectionObserver'
-export { default as useInterval } from './useInterval/useInterval'
 export * from './useInterval/useInterval'
-export { default as useIsClient } from './useIsClient/useIsClient'
 export * from './useIsClient/useIsClient'
-export { default as useIsFirstRender } from './useIsFirstRender/useIsFirstRender'
 export * from './useIsFirstRender/useIsFirstRender'
-export { default as useIsMounted } from './useIsMounted/useIsMounted'
 export * from './useIsMounted/useIsMounted'
-export { default as useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect/useIsomorphicLayoutEffect'
 export * from './useIsomorphicLayoutEffect/useIsomorphicLayoutEffect'
-export { default as useLocalStorage } from './useLocalStorage/useLocalStorage'
 export * from './useLocalStorage/useLocalStorage'
-export { default as useLockedBody } from './useLockedBody/useLockedBody'
 export * from './useLockedBody/useLockedBody'
-export { default as useMap } from './useMap/useMap'
 export * from './useMap/useMap'
-export { default as useMediaQuery } from './useMediaQuery/useMediaQuery'
 export * from './useMediaQuery/useMediaQuery'
-export { default as useOnClickOutside } from './useOnClickOutside/useOnClickOutside'
 export * from './useOnClickOutside/useOnClickOutside'
-export { default as useReadLocalStorage } from './useReadLocalStorage/useReadLocalStorage'
 export * from './useReadLocalStorage/useReadLocalStorage'
-export { default as useScreen } from './useScreen/useScreen'
 export * from './useScreen/useScreen'
-export { default as useScript } from './useScript/useScript'
 export * from './useScript/useScript'
-export { default as useSessionStorage } from './useSessionStorage/useSessionStorage'
 export * from './useSessionStorage/useSessionStorage'
-export { default as useSsr } from './useSsr/useSsr'
 export * from './useSsr/useSsr'
-export { default as useStep } from './useStep/useStep'
 export * from './useStep/useStep'
-export { default as useTernaryDarkMode } from './useTernaryDarkMode/useTernaryDarkMode'
 export * from './useTernaryDarkMode/useTernaryDarkMode'
-export { default as useTimeout } from './useTimeout/useTimeout'
 export * from './useTimeout/useTimeout'
-export { default as useToggle } from './useToggle/useToggle'
 export * from './useToggle/useToggle'
-export { default as useUpdateEffect } from './useUpdateEffect/useUpdateEffect'
 export * from './useUpdateEffect/useUpdateEffect'
-export { default as useWindowSize } from './useWindowSize/useWindowSize'
 export * from './useWindowSize/useWindowSize'

packages/usehooks-ts/src/useBoolean/useBoolean.mdx → packages/usehooks-ts/src/useBoolean/useBoolean.md

@@ -1,8 +1,3 @@
----
-title: useBoolean
-date: '2021-07-29'
----
-
 A simple abstraction to play with a boolean, don't repeat yourself.
 
 Related hooks:

packages/usehooks-ts/src/useBoolean/useBoolean.test.ts

@@ -1,6 +1,6 @@
 import { act, renderHook } from '@testing-library/react-hooks/dom'
 
-import useBoolean from './useBoolean'
+import { useBoolean } from './useBoolean'
 
 describe('useBoolean()', () => {
   test('should use boolean', () => {

packages/usehooks-ts/src/useBoolean/useBoolean.ts

@@ -8,7 +8,7 @@ interface UseBooleanOutput {
   toggle: () => void
 }
 
-function useBoolean(defaultValue?: boolean): UseBooleanOutput {
+export function useBoolean(defaultValue?: boolean): UseBooleanOutput {
   const [value, setValue] = useState(!!defaultValue)
 
   const setTrue = useCallback(() => setValue(true), [])
@@ -17,5 +17,3 @@ function useBoolean(defaultValue?: boolean): UseBooleanOutput {
 
   return { value, setValue, setTrue, setFalse, toggle }
 }
-
-export default useBoolean

packages/usehooks-ts/src/useClickAnyWhere/useClickAnyWhere.mdx → packages/usehooks-ts/src/useClickAnyWhere/useClickAnyWhere.md

@@ -1,8 +1,3 @@
----
-title: useClickAnyWhere
-date: '2021-11-17'
----
-
 This simple React hook offers you a click event listener at the page level, don't repeat yourself.
 
 It is made on the [useEventListener](/react-hook/use-event-listener).

packages/usehooks-ts/src/useClickAnyWhere/useClickAnyWhere.ts

@@ -2,10 +2,8 @@ import { useEventListener } from '..'
 
 type Handler = (event: MouseEvent) => void
 
-function useClickAnyWhere(handler: Handler) {
+export function useClickAnyWhere(handler: Handler) {
   useEventListener('click', event => {
     handler(event)
   })
 }
-
-export default useClickAnyWhere

packages/usehooks-ts/src/useCopyToClipboard/useCopyToClipboard.mdx → packages/usehooks-ts/src/useCopyToClipboard/useCopyToClipboard.md

@@ -1,8 +1,3 @@
----
-title: useCopyToClipboard
-date: '2021-08-04'
----
-
 This React hook provides a `copy` method to save a string in the [clipboard](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/clipboard) and the copied value (default: `null`).
 
 If anything doesn't work, it prints a warning in the console and the value will be `null`.

packages/usehooks-ts/src/useCopyToClipboard/useCopyToClipboard.test.ts

@@ -1,6 +1,6 @@
 import { act, renderHook } from '@testing-library/react-hooks/dom'
 
-import useCopyToClipboard from './useCopyToClipboard'
+import { useCopyToClipboard } from './useCopyToClipboard'
 
 describe('useClipboard()', () => {
   const originalClipboard = { ...global.navigator.clipboard }

packages/usehooks-ts/src/useCopyToClipboard/useCopyToClipboard.ts

@@ -3,7 +3,7 @@ import { useState } from 'react'
 type CopiedValue = string | null
 type CopyFn = (text: string) => Promise<boolean> // Return success
 
-function useCopyToClipboard(): [CopiedValue, CopyFn] {
+export function useCopyToClipboard(): [CopiedValue, CopyFn] {
   const [copiedText, setCopiedText] = useState<CopiedValue>(null)
 
   const copy: CopyFn = async text => {
@@ -26,5 +26,3 @@ function useCopyToClipboard(): [CopiedValue, CopyFn] {
 
   return [copiedText, copy]
 }
-
-export default useCopyToClipboard

packages/usehooks-ts/src/useCountdown/useCountdown.mdx → packages/usehooks-ts/src/useCountdown/useCountdown.md

@@ -1,8 +1,3 @@
----
-title: useCountdown
-date: '2022-01-01'
----
-
 **IMPORTANT**: The new useCountdown is deprecating the old one on the next major version.
 
 A simple countdown implementation. Support increment and decrement.

packages/usehooks-ts/src/useCountdown/useCountdown.test.ts

@@ -1,6 +1,6 @@
 import { act, renderHook } from '@testing-library/react-hooks/dom'
 
-import useCountdown from './useCountdown'
+import { useCountdown } from './useCountdown'
 
 jest.useFakeTimers()
 

packages/usehooks-ts/src/useCountdown/useCountdown.ts

@@ -38,7 +38,7 @@ interface CountdownControllers {
  *
  * @deprecated new useCountdown interface is already available (see https://usehooks-ts.com/react-hook/use-countdown), the old version will retire on usehooks-ts@3
  */
-function useCountdown(
+export function useCountdown(
   countdownOption: UseCountdownType,
 ): [number, CountdownHelpers]
 
@@ -52,11 +52,11 @@ function useCountdown(
  * @param  {?boolean} countdownOption.isIncrement - `false` by default, true if the countdown is increment.
  * @returns [counter, CountdownControllers]
  */
-function useCountdown(
+export function useCountdown(
   countdownOption: CountdownOption,
 ): [number, CountdownControllers]
 
-function useCountdown(
+export function useCountdown(
   countdownOption: UseCountdownType | CountdownOption,
 ): [number, CountdownHelpers | CountdownControllers] {
   /**
@@ -148,5 +148,3 @@ function useCountdown(
         } as CountdownControllers,
       ]
 }
-
-export default useCountdown

packages/usehooks-ts/src/useCounter/useCounter.mdx → packages/usehooks-ts/src/useCounter/useCounter.md

@@ -1,6 +1 @@
----
-title: useCounter
-date: '2021-07-29'
----
-
 A simple abstraction to play with a counter, don't repeat yourself.

packages/usehooks-ts/src/useCounter/useCounter.test.ts

@@ -1,6 +1,6 @@
 import { act, renderHook } from '@testing-library/react-hooks/dom'
 
-import useCounter from './useCounter'
+import { useCounter } from './useCounter'
 
 describe('useCounter()', () => {
   test('should use counter', () => {

packages/usehooks-ts/src/useCounter/useCounter.ts

@@ -8,7 +8,7 @@ interface UseCounterOutput {
   setCount: Dispatch<SetStateAction<number>>
 }
 
-function useCounter(initialValue?: number): UseCounterOutput {
+export function useCounter(initialValue?: number): UseCounterOutput {
   const [count, setCount] = useState(initialValue || 0)
 
   const increment = () => setCount(x => x + 1)
@@ -23,5 +23,3 @@ function useCounter(initialValue?: number): UseCounterOutput {
     setCount,
   }
 }
-
-export default useCounter

packages/usehooks-ts/src/useDarkMode/useDarkMode.mdx → packages/usehooks-ts/src/useDarkMode/useDarkMode.md

@@ -1,8 +1,3 @@
----
-title: useDarkMode
-date: '2021-07-15'
----
-
 This React Hook offers you an interface to enable, disable, toggle and read the dark theme mode.
 The returned value (`isDarkMode`) is a boolean to let you be able to use with your logic.
 

packages/usehooks-ts/src/useDarkMode/useDarkMode.test.ts

@@ -1,6 +1,6 @@
 import { act, renderHook } from '@testing-library/react-hooks'
 
-import useDarkMode from './useDarkMode'
+import { useDarkMode } from './useDarkMode'
 
 const mockMatchMedia = (matches: boolean): void => {
   Object.defineProperty(window, 'matchMedia', {

packages/usehooks-ts/src/useDarkMode/useDarkMode.ts

@@ -9,7 +9,7 @@ interface UseDarkModeOutput {
   disable: () => void
 }
 
-function useDarkMode(defaultValue?: boolean): UseDarkModeOutput {
+export function useDarkMode(defaultValue?: boolean): UseDarkModeOutput {
   const isDarkOS = useMediaQuery(COLOR_SCHEME_QUERY)
   const [isDarkMode, setDarkMode] = useLocalStorage<boolean>(
     'usehooks-ts-dark-mode',
@@ -29,5 +29,3 @@ function useDarkMode(defaultValue?: boolean): UseDarkModeOutput {
     disable: () => setDarkMode(false),
   }
 }
-
-export default useDarkMode

packages/usehooks-ts/src/useDebounce/useDebounce.mdx → packages/usehooks-ts/src/useDebounce/useDebounce.md

@@ -1,8 +1,3 @@
----
-title: useDebounce
-date: '2020-06-09'
----
-
 This React hook helps to limit that the component is re-rendered too many times.
 Imagine that you want to execute a function on an event that executes several hundred times per second such as moving the mouse or scrolling. This may cause the application to lag.
 To prevent this, the debounce uses an internal timer to execute the callback function every xx seconds (2nd parameter).

packages/usehooks-ts/src/useDebounce/useDebounce.test.ts

@@ -1,6 +1,6 @@
 import { renderHook } from '@testing-library/react-hooks/dom'
 
-import useDebounce from './useDebounce'
+import { useDebounce } from './useDebounce'
 
 describe('useDebounce()', () => {
   afterEach(() => {

packages/usehooks-ts/src/useDebounce/useDebounce.ts

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react'
 
-function useDebounce<T>(value: T, delay?: number): T {
+export function useDebounce<T>(value: T, delay?: number): T {
   const [debouncedValue, setDebouncedValue] = useState<T>(value)
 
   useEffect(() => {
@@ -13,5 +13,3 @@ function useDebounce<T>(value: T, delay?: number): T {
 
   return debouncedValue
 }
-
-export default useDebounce

packages/usehooks-ts/src/useDocumentTitle/useDocumentTitle.mdx → packages/usehooks-ts/src/useDocumentTitle/useDocumentTitle.md

@@ -1,6 +1 @@
----
-title: useDocumentTitle
-date: '2022-09-29'
----
-
 An easy way to set the title of the current document.

packages/usehooks-ts/src/useDocumentTitle/useDocumentTitle.test.ts

@@ -1,6 +1,6 @@
 import { renderHook } from '@testing-library/react-hooks/dom'
 
-import useDocumentTitle from './useDocumentTitle'
+import { useDocumentTitle } from './useDocumentTitle'
 
 describe('useDocumentTitle()', () => {
   test('title should be in the document', () => {

packages/usehooks-ts/src/useDocumentTitle/useDocumentTitle.ts

@@ -1,9 +1,7 @@
 import { useIsomorphicLayoutEffect } from '..'
 
-function useDocumentTitle(title: string): void {
+export function useDocumentTitle(title: string): void {
   useIsomorphicLayoutEffect(() => {
     window.document.title = title
   }, [title])
 }
-
-export default useDocumentTitle

packages/usehooks-ts/src/useEffectOnce/useEffectOnce.mdx → packages/usehooks-ts/src/useEffectOnce/useEffectOnce.md

@@ -1,8 +1,3 @@
----
-title: useEffectOnce
-date: '2021-11-08'
----
-
 Just modified version of `useEffect` that's executed only one time, at the mounting time.
 
 See also:

packages/usehooks-ts/src/useEffectOnce/useEffectOnce.test.ts

@@ -1,6 +1,6 @@
 import { renderHook } from '@testing-library/react-hooks/dom'
 
-import useEffectOnce from './useEffectOnce'
+import { useEffectOnce } from './useEffectOnce'
 
 describe('use effect once()', () => {
   test('should be triggered only once', () => {

packages/usehooks-ts/src/useEffectOnce/useEffectOnce.ts

@@ -1,8 +1,6 @@
 import { EffectCallback, useEffect } from 'react'
 
-function useEffectOnce(effect: EffectCallback) {
+export function useEffectOnce(effect: EffectCallback) {
   // eslint-disable-next-line react-hooks/exhaustive-deps
   useEffect(effect, [])
 }
-
-export default useEffectOnce

packages/usehooks-ts/src/useElementSize/useElementSize.mdx → packages/usehooks-ts/src/useElementSize/useElementSize.md

@@ -1,7 +1,2 @@
----
-title: useElementSize
-date: '2020-06-29'
----
-
 This hook helps you to dynamically recover the width and the height of an HTML element.
 Dimensions are updated on load, on mount/un-mount, when resizing the window and when the ref changes.

packages/usehooks-ts/src/useElementSize/useElementSize.test.ts

@@ -1,6 +1,6 @@
 import { act, renderHook } from '@testing-library/react-hooks'
 
-import { useElementSize } from '..'
+import { useElementSize } from './useElementSize'
 
 const setupHook = () => renderHook(() => useElementSize())
 

packages/usehooks-ts/src/useElementSize/useElementSize.ts

@@ -7,7 +7,7 @@ interface Size {
   height: number
 }
 
-function useElementSize<T extends HTMLElement = HTMLDivElement>(): [
+export function useElementSize<T extends HTMLElement = HTMLDivElement>(): [
   (node: T | null) => void,
   Size,
 ] {
@@ -39,5 +39,3 @@ function useElementSize<T extends HTMLElement = HTMLDivElement>(): [
 
   return [setRef, size]
 }
-
-export default useElementSize

packages/usehooks-ts/src/useEventCallback/useEventCallback.ts

@@ -2,7 +2,7 @@ import { useCallback, useRef } from 'react'
 
 import { useIsomorphicLayoutEffect } from '..'
 
-export default function useEventCallback<Args extends unknown[], R>(
+export function useEventCallback<Args extends unknown[], R>(
   fn: (...args: Args) => R,
 ) {
   const ref = useRef<typeof fn>(() => {