decentraland-hooks

A collection of React hooks commonly used in Decentraland projects.

Installation

npm install @dcl/hooks

Available Hooks

• useAdvancedUserAgentData: Enhanced user agent information
• useAsyncState: Async state management with dependencies
• useAsyncTask: Single async task management
• useAsyncTasks: Multiple async tasks management
• usePatchState: Partial state updates for complex objects
• useAsyncEffect: Async version of useEffect
• useAsyncMemo: Async version of useMemo

Examples

useAsyncState

import { useAsyncState } from '@dcl/hooks'

function Example() {
  const [data, { loading, error }] = useAsyncState(
    async () => {
      const response = await fetch('https://api.example.com/data')
      return response.json()
    },
    [] // dependencies
  )

  if (loading) return <div>Loading...</div>
  if (error) return <div>Error: {error.message}</div>
  return <div>{JSON.stringify(data)}</div>
}

useAdvancedUserAgentData

import { useAdvancedUserAgentData } from '@dcl/hooks'

function BrowserInfo() {
  const [isLoading, data] = useAdvancedUserAgentData()

  if (isLoading) return <div>Loading browser info...</div>

  return (
    <div>
      <h3>Browser Information</h3>
      <ul>
        <li>Browser: {data?.browser.name} {data?.browser.version}</li>
        <li>OS: {data?.os.name} {data?.os.version}</li>
        <li>CPU Architecture: {data?.cpu.architecture}</li>
        <li>Mobile Device: {data?.mobile ? 'Yes' : 'No'}</li>
      </ul>
    </div>
  )
}

License

This project is licensed under the MIT License - see the LICENSE file for details.