gatsby-plugin-hummhive-react-web-data

gatsby-plugin-hummhive-react-web-data

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

Installation

• Install with npm install gatsby-plugin-hummhive-react-web-data
• In your gatsby-config.js file, add plugins: ["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 object and the logged in Member object.

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

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

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

Fetching state

import React, { useEffect, useContext } from "react"
import { HummContext } from "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 "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>
  )
}