Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/ryohidaka/use-backlog

React Hooks library for Backlog.
https://github.com/ryohidaka/use-backlog

backlog backlog-api

Last synced: about 19 hours ago
JSON representation

React Hooks library for Backlog.

Awesome Lists containing this project

README

        

# use-backlog

[![npm version](https://badge.fury.io/js/use-backlog.svg)](https://badge.fury.io/js/use-backlog)
![build](https://github.com/ryohidaka/use-backlog/workflows/Build/badge.svg)
[![codecov](https://codecov.io/gh/ryohidaka/use-backlog/graph/badge.svg?token=DCij5i7WBc)](https://codecov.io/gh/ryohidaka/use-backlog)
[![License](https://img.shields.io/badge/license-MIT-blue.svg)](https://opensource.org/licenses/MIT)

[![ko-fi](https://ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/B0B6TVH92)

## Overview

React Hooks library for [Backlog](https://backlog.com/).

## Installation

You can install this library using npm:

```shell
npm install use-backlog
```

## Usage

Wrap your app with the `BacklogProvider` and provide `host` and `apiKey` property.

```tsx
import { BacklogProvider } from "use-backlog";

ReactDOM.render(




,
document.getElementById("root"),
);
```

Use the provided hooks to fetch Backlog data:

- useProjects
- useProject
- useIssues
- useIssue
- useMyself

```tsx
import { useBacklog, useProjects } from "use-backlog";

function App() {
const { setConfig } = useBacklog();
const { projects, isLoading } = useProjects();

setConfig?.({ host: "example.com", apiKey: "hogehoge" });

if (isLoading) {
return

Loading...
;
}
return (
<>

    {projects?.map((project) =>
  • {project.name}
  • )}

>
);
}

export default App;
```

## API

### Hooks

- `useProjects(params, swrConfig)` - Fetch multiple projects.

- `useProject(projectIdOrKey, swrConfig)` - Get a project.

- `useIssues(params, swrConfig)` - Get a list of issues in a project.

- `useIssue(issueIdOrKey, swrConfig)` - Get a issue.

- `useMyself(swrConfig)` - Get own information about user.

### BacklogProvider

The `BacklogProvider` component should be used to wrap your app.

## Link

- [Backlog](https://backlog.com/)
- [backlog-js](https://github.com/nulab/backlog-js)
- [Docs for Backlog API](https://developer.nulab.com/docs/backlog)

## License

This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.