@hummhive/gatsby-plugin-hummhive-react-web-data

Power your Gatsby site with public and/or encrypted members-only data from HummHive.

This package abstracts all the encryption, decryption, public/private key generation, and HummHive data-bridge calls into a React Context Object that contains:

1. A HummHive state object
2. Actions to fetch or create data
3. A set of React Hooks to simplify usage of encrypted blob data.

Installation

1. Install with npm install @hummhive/gatsby-plugin-hummhive-react-web-data
2. In your gatsby-config.js file, add plugins: ["@hummhive/gatsby-plugin-hummhive-react-web-data"]

Usage

This plugin uses hummhive-react-web-data under the hood. Go there for the full documentation.

Using state

Note: This plugin automatically fetches the Hive state and the logged in Member state so there's no need to manually fetch them.

import React, { useContext } from "react"
import { HummContext } from "@hummhive/gatsby-plugin-hummhive-react-web-data"

const MyComponent = () => {
  const { state } = useContext(HummContext)

  return (
    <h1>Hello {state.hive.name}</h1>
  )
}

Fetching state

import React, { useEffect, useContext } from "react"
import { HummContext } from "@hummhive/gatsby-plugin-hummhive-react-web-data"

const MyComponent = () => {
  const { state, actions } = useContext(HummContext)

  // fetch groups when the component mounts
  useEffect(() => {
    if (!state.groups) actions.getGroups()
  }, [])

  if (!state.groups) return <p>Loading...</p>

  return (
    <h1>Hello {state.groups[0].name}</h1>
  )
}

Joining a Hive

import React, { useEffect, useContext, useState } from "react"
import { HummContext } from "@hummhive/gatsby-plugin-hummhive-react-web-data"

const MyComponent = () => {
  const { state, actions } = useContext(HummContext)
  const [error, setError] = useState(null)

  const handleJoin = async () => {
    try {
      await actions.joinHive(state.hive, USERNAME, EMAIL, GROUP_ID)
    } catch (err) {
      setError(err.message)
    }
  }

  return (
    <button onClick={handleJoin}>Join</button>
  )
}