Skip to content

TeamWertarbyte/updatehive-react

Repository files navigation

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';

const Changelog = () => {
  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) => (
          <li key={entry.id}>{entry.version}</li>
        ))}
      </ul>
    </div>
  );
};

Component

import {
  ChangelogContainer,
  MinimalChangelogList,
} from '@wertarbyte/updatehive-react';

return (
  <ChangelogContainer
    API_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.
 */
export type UpdateHiveConfig = {
  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.

About

No description, website, or topics provided.

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Contributors 2

  •  
  •