@geut/hyper-hooks

React hooks for hyper world

@geut/hyper-hooks provides a set of React hooks and providers to work with hyper libraries like hypercore and hyperbee

Table of Contents

• Install
• Usage
• API
• Issues
• Contributing
• License

Install

$ npm install @geut/hyper-hooks

or

$ yarn add @geut/hyper-hooks

Usage

// ./App.js

import React from 'react'

import { 
  HyperProvider, 
  StorageProvider, 
  HypercoreProvider, 
  HyperbeeProvider
} from '@geut/hyper-hooks'

import Db from './components/Db'

function App () {
  return (
    <HyperProvider>
      <StorageProvider>
        <HyperbeeProvider>
          <Db />
        </HyperbeeProvider>
      </StorageProvider>
    </HyperProvider>
  )
}

export default App

// ./components/Db.js

import React, { useEffect } from 'react'

import { useHyperbee } from '@geut/hyper-hooks'

function Db () {
  const { db, isReady, useGet, usePut, useValue } = useHyperbee()

  // db.get and db.put separately
  const [title] = useGet('title')
  const putTitle = usePut('title')

  // Shorthand for get/put
  const { value: description, put: putDescription } = useValue('description')

  useEffect(() => {
    const interval = setInterval(() => {
      putTitle(`New title - ${Date.now()}`)
      putDescription(`New description - ${Date.now()}`)
    }, 2000)

    return function () {
      clearInterval(interval)
    }
  }, [])

  if (!isReady) return null

  return (
    <div>
      <h1>{title}</h1>
      <p>{description}</p>
      <pre>Key: {db.feed.discoveryKey.toString('hex')}</pre>
    </div>
  )
}

Api

HyperProvider

Keeps reference to inner hyper elements.

children

ReactElement | required

React children.

StorageProvider

Provides a storage layer where your hyper elements will be stored

children

ReactElement | required

React children.

storage

function() | defaults to: () => RandomAccessMemory

Function to create the storage.

HypercoreProvider

Creates and provides an hypercore instance.

id

string | defaults to 'default'

Identifies your hypercore for access it later with useHypercore.

config

object

Except for config.key the rest of the config values are forwarded to the Hypercore instance options.

config.key

Buffer | defaults to crypto.randomBytes(32)

Hypercore feed public key.

HyperbeeProvider

hyperbee provider.

id

string | defaults to 'default'

Identifies your hyperdrive for access it later with useHyperdrive.

config

object

Except for config.feed the rest of the config values are forwarded to the Hyperbee instance options.

config.feed

Hypercore

Hypercore instance for this Hyperbee. If not provided a new one will be created with a random key pair.

Issues

🐛 If you found an issue we encourage you to report it on github. Please specify your OS and the actions to reproduce it.

Contributing

👥 Ideas and contributions to the project are welcome. You must follow this guideline.

License

MIT © A GEUT project