publish

README.md

@@ -120,20 +120,20 @@ There are three layout options currently available:
 
 1. **Badge**: Display a badge with the average rating, total reviews, and link to Google Business profile
 
-![Badge Layout](public/badge-example.png)
-
 ```jsx
  <ReactGoogleReviews layout="badge" featurableId={featurableWidgetId} />
 ```
 
-2. **Carousel**: An interactive carousel that displays reviews
+<img src="public/badge-example.png" alt="Badge Layout" width="200"/>
 
-![Carousel Layout](public/carousel-example.png)
+2. **Carousel**: An interactive carousel that displays reviews
 
 ```jsx
  <ReactGoogleReviews layout="carousel" featurableId={featurableWidgetId} />
 ```
 
+![Carousel Layout](public/carousel-example.png)
+
 3. **Custom renderer**: Render reviews using a custom function
 
 ```jsx
@@ -151,10 +151,34 @@ There are three layout options currently available:
 }} />
 ```
 
-### Props
+## Props
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| featurableId | string | Featurable widget ID |
+| reviews | GoogleReview[] | Array of reviews to display, fetched using `dangerouslyFetchPlaceReviews` |
+| layout | `"badge" \| "carousel" \| "custom"` | Layout of the reviews component |
+| nameDisplay?| `"fullNames" \| "firstAndLastInitials" \| "firstNamesOnly"` | How to display names on reviews |;
+| logoVariant? | `"logo" \| "icon" \| "none"` | How to display the Google logo |
+| maxCharacters? | number | When collapsed, the maximum number of characters to display in the review body |
+| dateDisplay? | --- | How to display the review date |
+| reviewVariant? | --- | Review layout variations |
+| theme? | `"light" \| "dark"` | Color scheme of the component |
+| --- | **Carousel Props** | --- |
+| carouselSpeed? | number | Autoplay speed of the carousel in milliseconds |
+| carouselAutoplay? | boolean | Whether to autoplay the carousel |
+| maxItems? | number | Maximum number of items to display at any one time in carousel |
+| --- | **Badge Props** | --- |
+| profileUrl? | string | Link to Google Business profile, if manually fetching reviews via Place API. Using Featurable API will automatically supply this URL. |
 
 ## License
 
 This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details. By using the Featurable API, you agree to the [Featurable Terms of Service](https://featurable.com/terms).
 
-## Acknowledgements
+## Acknowledgements
+
+This library uses [`slick-carousel`](https://github.com/kenwheeler/slick) and [`react-slick`](https://github.com/akiran/react-slick) for the carousel layout.
+
+## Contributing
+
+Contributions are what make the open-source community such an amazing place to learn, inspire, and create. Any contributions you make are **greatly appreciated**.

package.json

@@ -1,12 +1,29 @@
 {
   "name": "react-google-reviews",
-  "version": "0.0.1",
-  "description": "",
+  "version": "1.0.0",
+  "description": "A React component to easily display Google reviews using Google Places API or Google My Business API.",
   "scripts": {
     "rollup": "rollup -c --bundleConfigAsCjs"
   },
-  "author": "Ryan Chiang",
-  "license": "ISC",
+  "keywords": [
+    "react",
+    "google",
+    "reviews",
+    "google reviews",
+    "google places",
+    "google my business"
+  ],
+  "author": "Ryan Chiang <ryan@featurable.com> (https://featurable.com)",
+  "homepage": "https://github.com/ryanschiang/react-google-reviews#readme",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ryanschiang/react-google-reviews.git"
+  },
+  "bugs": {
+    "url": "https://github.com/ryanschiang/react-google-reviews/issues",
+    "email": "ryan@featurable.com"
+  },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^26.0.1",
     "@rollup/plugin-node-resolve": "^15.2.3",
@@ -45,5 +62,8 @@
     "clsx": "^2.1.1",
     "react-slick": "^0.30.2",
     "slick-carousel": "^1.8.1"
+  },
+  "engines": {
+    "node": ">= 10.13"
   }
 }

src/components/ReactGoogleReviews/ReactGoogleReviews.tsx

@@ -43,7 +43,7 @@ interface ReactGoogleReviewsBaseProps {
     reviewVariant?: ReviewVariant;
 
     /**
-     * Theme of the carousel.
+     * Color scheme of the component.
      */
     theme?: Theme;
 }