https://github.com/teamwertarbyte/updatehive-react
https://github.com/teamwertarbyte/updatehive-react
Last synced: about 1 year ago
JSON representation
- Host: GitHub
- URL: https://github.com/teamwertarbyte/updatehive-react
- Owner: TeamWertarbyte
- License: mit
- Created: 2024-06-20T14:03:19.000Z (about 2 years ago)
- Default Branch: master
- Last Pushed: 2024-10-09T09:24:46.000Z (over 1 year ago)
- Last Synced: 2025-04-09T21:48:42.776Z (about 1 year ago)
- Language: TypeScript
- Size: 191 KB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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](https://github.com/TeamWertarbyte/updatehive-react/blob/master/src/App.tsx) in the src directory.
### Hook
```tsx
import { useChangelog } from '@wertarbyte/updatehive-react';
const Changelog = () => {
const { loading, error, changelog } = useChangelog({
connection: {
API_KEY,
},
changelogs: {
product: PRODUCT_ID,
},
});
if (loading) return
Loading...
;
if (error) return Error: {error.message}
;
return (
{changelog.title}
{changelog.entries.map((entry) => (
- {entry.version}
))}
);
};
```
### Component
```tsx
import {
ChangelogContainer,
MinimalChangelogList,
} from '@wertarbyte/updatehive-react';
return (
);
```
## Configuration
```tsx
/**
* 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.