NextJS 13 - App Router
-
+### Interactive rating
-**pages/\_app.js**
+**app/layout.tsx**
-```jsx
-import '@smastrom/react-rating/style.css';
+```tsx
+import '@smastrom/react-rating/style.css' // Import it only once in the whole app
+```
-function MyApp({ Component, pageProps }) {
- // ...
+**components/Rating.tsx**
+
+```tsx
+'use client'
+
+import { useState } from 'react'
+import { Rating as ReactRating } from '@smastrom/react-rating'
+
+export function Rating() {
+ const [rating, setRating] = useState(0)
+
+ return
+}
```
**in any page/component:**
```tsx
-import { Rating } from '@smastrom/react-rating';
+import { Rating } from './components/Rating'
export default function Home() {
- // ...
+ return (
+
+ {/* Other nodes... */}
+
+ {/* Other nodes... */}
+
+ )
+}
+```
+
+### Non-interactive rating
+
+**app/layout.tsx**
+
+```tsx
+import '@smastrom/react-rating/style.css' // Import it only once in the whole app
+```
+
+**in any page/component:**
+
+```tsx
+import { Rating } from '@smastrom/react-rating'
+
+export default function Home() {
+ return (
+
+ {/* Other nodes... */}
+
+ {/* Other nodes... */}
+
+ )
+}
```