UpdateHive - React Client component

Client side react components and hooks for interacting with the UpdateHive API. Working with and rendering changelogs provided by UpdateHive in a standardized way across react applications.

Installation

# npm
npm -i @wertarbyte/updatehive-react
# yarn
yarn add @wertarbyte/updatehive-react

Usage

Either use the react hook and render the changelog yourself or let this library fetch and render the changelog for you.

For a more complete example, see the App.tsx in the src directory.

Hook

import{useChangelog}from'@wertarbyte/updatehive-react';constChangelog=()=>{const{ loading, error, changelog }=useChangelog({connection: {API_KEY,},changelogs: {product: PRODUCT_ID,},});if(loading)return<p>Loading...</p>;if(error)return<p>Error: {error.message}</p>;return(<div><h1>{changelog.title}</h1><ul>{changelog.entries.map((entry)=>(<likey={entry.id}>{entry.version}</li>))}</ul></div>);};

Component

import{ChangelogContainer,MinimalChangelogList,}from'@wertarbyte/updatehive-react';return(<ChangelogContainerAPI_KEY={API_KEY}product={PRODUCT}config={{url: serviceURL}}><MinimalChangelogList/></ChangelogContainer>);

Configuration

/** * Configuration to retrieve changelogs from UpdateHive. * * @param connection * API_KEY: API_KEY to access UpdateHive public REST API. * url: Override the default URL to UpdateHive API. * * @param changelogs * product: Product ID to retrieve changelogs for. * onlyLast: Retrieve only the last changelog. */exporttypeUpdateHiveConfig={connection: {API_KEY: string;url?: string;};changelogs: {product: string;onlyLast?: boolean;};};

Development

Testing

The library can be easily testet in dev mode via the provided 'dev' script and App.tsx.

# npm
npm run dev

ChangelogLists

ChangelogLists are split into public (API) classes and their internal representation, to separate concerns and allow for easier reusage.