@fluxis-cognis/react-hooks NPM

React Hooks

Examples

useAutoAnimate

The useAutoAnimate hook provides a simple way to animate elements when they enter or exit the viewport. Here's an example of how to use it:

import React, { useRef } from 'react'
import useAutoAnimate from '@fluxis-cognis/react-hooks'

function AnimatedComponent() {
	const elementRef = useAutoAnimate()

	return <div ref={elementRef}></div>
}

export default AnimatedComponent

useDraggable

The useDraggable hook allows you to make elements draggable within your React components. Here's an example of how to use it:

import React from 'react'
import useDraggable from '@fluxis-cognis/react-hooks'

function DraggableComponent() {
	const { position, isDragging, handleMouseDown } = useDraggable()

	return (
		<div
			style={{
				position: 'absolute',
				left: position.x,
				top: position.y,
				width: '100px',
				height: '100px',
				background: isDragging ? 'red' : 'blue',
				cursor: 'pointer'
			}}
			onMouseDown={handleMouseDown}
		>
			Drag me!
		</div>
	)
}

export default DraggableComponent

useDropDown

The useDropDown hook enables you to create a dropdown component with selectable items. Here's an example of how to use it:

import React from 'react'
import {
	useDropDown,
	TypeDropDownItem,
	useAutoAnimate
} from '@fluxis-cognis/react-hooks'

const initialSelectedItem: TypeDropDownItem = {
	item: 'Initial Item',
	JSX: () => <div>Initial Item</div>,
	additionally: {
		key: 'value'
	}
}

const items: TypeDropDownItem[] = [
	{
		item: 'Item 1',
		JSX: () => <div>Item 1</div>
	},
	{
		item: 'Item 2',
		JSX: () => <div>Item 2</div>,
		additionally: {
			key: 'value'
		}
	},
	{
		item: 'Item 3',
		JSX: () => <div>Item 3</div>
	}
]

function DropDownComponent() {
	const {
		selectedItem,
		isOpen,
		closeDropDown,
		toggleDropDown,
		onSelectItem,
		dropDownRef
	} = useDropDown({ initialSelectedItem, items })
	const parent = useAutoAnimate()

	return (
		<div ref={dropDownRef}>
			<button onClick={toggleDropDown}>Toggle Dropdown</button>
			<div ref={parent}>
				{isOpen && (
					<div>
						{items.map((item, index) => (
							<div key={index} onClick={() => onSelectItem(item)}>
								{item.JSX()}
							</div>
						))}
					</div>
				)}
			</div>
			<div>Selected Item: {selectedItem}</div>
		</div>
	)
}

export default DropDownComponent

useIntersectionObserver

The useIntersectionObserver hook allows you to track when an element enters or exits the viewport. Here's an example of how to use it to add a CSS class when an element is in view:

import React, { useRef } from 'react'
import useIntersectionObserver, {
	TypeIntersectionObserver
} from '@fluxis-cognis/react-hooks'

function IntersectionObserverComponent() {
	const elementRef = useRef < HTMLDivElement > null

	useIntersectionObserver({
		value: elementRef,
		addClassName: 'visible'
	})

	return <div ref={elementRef}>{/* your content */}</div>
}

export default IntersectionObserverComponent

useMousePosition

The useMousePosition hook allows you to track the position of the mouse cursor within a specified element. Here's an example of how to use it:

import React, { useRef } from 'react'
import useMousePosition, {
	ReturnMousePosition
} from '@fluxis-cognis/react-hooks'

function MousePositionComponent() {
	const elementRef = useRef < HTMLDivElement > null

	const { x, y }: ReturnMousePosition = useMousePosition(elementRef)

	return (
		<div
			ref={elementRef}
			style={{
				width: '300px',
				height: '300px',
				border: '1px solid black',
				position: 'relative'
			}}
		>
			<div style={{ position: 'absolute', left: x, top: y }}>
				Mouse Position
			</div>
		</div>
	)
}

export default MousePositionComponent

useNetwork

The useNetwork hook allows you to track the network status of the user's device, including whether it's online or offline, the connection type, and the connection speed. Here's an example of how to use it:

import React from 'react'
import useNetwork, { NetworkInfo } from '@fluxis-cognis/react-hooks'

function NetworkStatusComponent() {
	const { isOnline, connectionType, connectionSpeed }: NetworkInfo =
		useNetwork()

	return (
		<div>
			<div>Status: {isOnline ? 'Online' : 'Offline'}</div>
			{isOnline && (
				<div>
					<div>Connection Type: {connectionType}</div>
					<div>
						Connection Speed:{' '}
						{connectionSpeed ? `${connectionSpeed} Mbps` : 'Unknown'}
					</div>
				</div>
			)}
		</div>
	)
}

export default NetworkStatusComponent

useOutsideClick

The useOutsideClick hook allows you to detect clicks that occur outside of a specified element. Here's an example of how to use it:

import React, { useRef } from 'react'
import useOutsideClick from '@fluxis-cognis/react-hooks'

function OutsideClickComponent() {
	const wrapperRef = useRef < HTMLDivElement > null

	const handleClickOutside = () => {
		console.log('Clicked outside the element!')
	}

	useOutsideClick(wrapperRef, handleClickOutside)

	return (
		<div
			ref={wrapperRef}
			style={{ width: '200px', height: '200px', background: 'lightgray' }}
		>
			Click inside or outside this box!
		</div>
	)
}

export default OutsideClickComponent

usePersistentState

The usePersistentState hook allows you to persist state data in the browser's localStorage. Here's an example of how to use it:

import React from 'react'
import usePersistentState from '@fluxis-cognis/react-hooks'

function PersistentStateComponent() {
	const persistentState = usePersistentState('myData', 'defaultValue')

	const data = persistentState()

	const setData = () => {
		persistentState('newData')
	}

	const clearData = () => {
		persistentState.clear()
	}

	return (
		<div>
			<div>Persistent Data: {data}</div>
			<button onClick={setData}>Set New Data</button>
			<button onClick={clearData}>Clear Data</button>
		</div>
	)
}

export default PersistentStateComponent

useTimer

The useTimer hook allows you to create a timer with start, stop, and reset functionality. Here's an example of how to use it:

import React from 'react'
import useTimer from '@fluxis-cognis/react-hooks'

function TimerComponent() {
	const [time, startTimer, stopTimer, resetTimer] = useTimer()

	const formatTime = seconds => {
		const hours = Math.floor(seconds / 3600)
		const minutes = Math.floor((seconds % 3600) / 60)
		const remainingSeconds = seconds % 60
		return `${hours}:${minutes < 10 ? '0' + minutes : minutes}:${
			remainingSeconds < 10 ? '0' + remainingSeconds : remainingSeconds
		}`
	}
	return (
		<div>
			<div>Time: {formatTime(time)}</div>
			<button onClick={startTimer}>Start</button>
			<button onClick={stopTimer}>Stop</button>
			<button onClick={resetTimer}>Reset</button>
		</div>
	)
}

export default TimerComponent

useWindowSize

The useWindowSize hook allows you to track the size of the browser window and determine if the device is in a mobile viewport. Here's an example of how to use it:

import React from 'react'
import useWindowSize from '@fluxis-cognis/react-hooks'

function WindowSizeComponent() {
	const { windowSize, isMobile } = useWindowSize()

	return (
		<div>
			<div>Window Width: {windowSize.width}</div>
			<div>Window Height: {windowSize.height}</div>
			<div>Is Mobile: {isMobile ? 'Yes' : 'No'}</div>
		</div>
	)
}

export default WindowSizeComponent

useKeyDown

This hook listens for a specific key press and triggers a callback function when the key is pressed.

import { useKeyDown } from './hooks';

function MyComponent() {
  useKeyDown('Enter', () => {
    console.log('Enter key pressed!');
    // Your callback logic here
  });

  return (
    <div>
      {/* Your component content */}
    </div>
  );
}

useAltKeyDown

This hook listens for a specific key press along with the Alt key and triggers a callback function when both are pressed simultaneously.

import { useAltKeyDown } from './hooks';

function MyComponent() {
  useAltKeyDown('C', () => {
    console.log('Alt + C pressed!');
    // Your callback logic here
  });

  return (
    <div>
      {/* Your component content */}
    </div>
  );
}

react react-dom typescript @types/react @types/react-dom @formkit/auto-animate

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago