https://github.com/kylekarpack/react-goodreads-shelf

A React widget for displaying a user's public bookshelf
https://github.com/kylekarpack/react-goodreads-shelf

books goodreads react reactjs reading

Last synced: 3 months ago
JSON representation

A React widget for displaying a user's public bookshelf

• Host: GitHub
• URL: https://github.com/kylekarpack/react-goodreads-shelf
• Owner: kylekarpack
• License: mit
• Created: 2019-06-13T17:24:15.000Z (about 7 years ago)
• Default Branch: main
• Last Pushed: 2025-11-17T06:19:22.000Z (7 months ago)
• Last Synced: 2025-11-17T07:25:41.639Z (7 months ago)
• Topics: books, goodreads, react, reactjs, reading
• Language: TypeScript
• Homepage: https://kylekarpack.github.io/react-goodreads-shelf
• Size: 20.4 MB
• Stars: 19
• Watchers: 0
• Forks: 9
• Open Issues: 6
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# react-goodreads-shelf

[![build](https://github.com/kylekarpack/react-goodreads-shelf/actions/workflows/node.js.yml/badge.svg)](https://github.com/kylekarpack/react-goodreads-shelf/actions/workflows/node.js.yml) [![Maintainability Rating](https://sonarcloud.io/api/project_badges/measure?project=kylekarpack_react-goodreads-shelf&metric=sqale_rating)](https://sonarcloud.io/dashboard?id=kylekarpack_react-goodreads-shelf) [![Coverage](https://sonarcloud.io/api/project_badges/measure?project=kylekarpack_react-goodreads-shelf&metric=coverage)](https://sonarcloud.io/dashboard?id=kylekarpack_react-goodreads-shelf)

This React component allows you to display a public Goodreads shelf in a React application. It's a lot like the Goodreads JavaScript widget, but allows for more customization, better async loading, and React-like usage.

## Demo

[Live Demo](https://kylekarpack.github.io/react-goodreads-shelf)

Preview

![Example image](/sample/sample.png)

## Installation

```

npm install --save react-goodreads-shelf

```

or

```

yarn add react-goodreads-shelf

```

## Usage

```jsx

import React from "react";

import GoodreadsBookshelf from "react-goodreads-shelf";

export default function App() {

  return ;

}

```

## Customization

You can also set some options as supported by the Goodreads list page:

| Option | Type   | Description                                     | Default   |

| ------ | ------ | ----------------------------------------------- | --------- |

| shelf  | string | The shelf from which to fetch books             | read      |

| sort   | string | The field by which to sort the results returned | date_read |

| limit  | number | The maximum number of books to be returned      | 10        |

| width  | number | Minimum width allowed for each book             | 100       |

| search | string | Search text                                     | ""        |

## Development

- `npm run start` to watch changes and build

- `npm run storybook` to launch storybook for testing

## Contribution

Please feel free to open issues or pull requests and I will review as promptly as I am able.

### Contributors

  

    

      
Kyle
💻

      
David Dias
️️️️♿️

      
Eli Gundry
💻

      
Bassem Ibrahim
💻