A React widget for displaying a user's public bookshelf


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.

Example image


npm install --save react-goodreads-shelf


yarn add react-goodreads-shelf


import React from "react";
import { GoodreadsBookshelf } from "react-goodreads-shelf";

export default function App() {
	return (
		<GoodreadsBookshelf userId="USER_ID_HERE" apiKey="API_KEY_HERE" />


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

Option Type Description Default
shelf string The shelf from which to fetch books read
sort string The order in 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
details boolean Whether to show book details like book title, author, and summary false


  • yarn start to watch changes and build
  • yarn storybook to launch storybook for testing


Short-term plans include adding additional API options and styling

Download Details:

Author: kylekarpack

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

#react #reactjs #javascript

A React widget for displaying a user's public bookshelf
5.30 GEEK