Skip to content

Commit

Permalink
Implement <PagodaUiProvider> to remove hard requirement / peer dep on…
Browse files Browse the repository at this point in the history
… next js
  • Loading branch information
calebjacob committed Aug 12, 2024
1 parent 491090b commit e80598d
Show file tree
Hide file tree
Showing 12 changed files with 80 additions and 219 deletions.
33 changes: 29 additions & 4 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,25 +6,50 @@ A React component library that implements the official design system of NEAR and

**React 18**

**Next JS >=13** - Some of our components rely on `next/link` and hooks like `router.push()`. We'll look into refactoring the library soon to remove the Next JS requirement so that our library can be used within any React framework.

**Zustand 4** - Our `openToast()` method is able to work in any context due to relying on a Zustand global store.

## Installation & Setup

```bash
pnpm add zustand next
pnpm add zustand
pnpm add @near-pagoda/ui
```

In your `_app.tsx` file, you'll need to import the following CSS files:
In your `_app.tsx` file, import the following CSS files in order:

```tsx
import '@near-pagoda/ui/globals.css';
import '@near-pagoda/ui/theme.css';
import '@near-pagoda/ui/lib.css';
```

Wrap your application with the `<PagodaUiProvider>` to pass in your framework's `<Link>` component and router methods. You'll also want to include the `<Toaster />` component to display toasts when calling `openToast()`:

```tsx
import Link from 'next/link';
import { useRouter } from 'next/router';
import { PagodaUiProvider, Toaster } from '@near-pagoda/ui';

...

const router = useRouter();

...

<PagodaUiProvider
value={{
routerPrefetch: router.prefetch,
routerPush: router.push,
Link,
}}
>
...
<Toaster />
</PagodaUiProvider>
```

Why is `<PagodaUiProvider>` needed? Some of our components render anchor tags or dynamically change the current route. This provider allows our library to support any React framework (Vanilla/Vite, Next JS, etc) by passing in your router's components.

## Documentation

Please refer to `README.md` files in `src/components` for examples and documentation of components.
Expand Down
3 changes: 1 addition & 2 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@near-pagoda/ui",
"version": "0.3.1",
"version": "1.0.0",
"description": "A React component library that implements the official NEAR design system.",
"license": "MIT",
"repository": {
Expand Down Expand Up @@ -57,7 +57,6 @@
}
},
"peerDependencies": {
"next": ">=13",
"react": "^18",
"react-dom": "^18",
"zustand": "^4"
Expand Down
Loading

0 comments on commit e80598d

Please sign in to comment.