Skip to content

Commit

Permalink
docs(readme.md): polishing touches to docs
Browse files Browse the repository at this point in the history
  • Loading branch information
arjunvegda committed Mar 5, 2023
1 parent fe82bfe commit a31a8a2
Show file tree
Hide file tree
Showing 2 changed files with 42 additions and 31 deletions.
67 changes: 39 additions & 28 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@
# Jotai DevTools

## Features
[![Build Status](https://img.shields.io/github/actions/workflow/status/jotaijs/jotai-devtools/ci.yml?style=flat&colorA=000000&colorB=259e02)](https://github.com/jotaijs/jotai-devtools/actions/workflows/ci.yml)
[![Version](https://img.shields.io/npm/v/jotai-devtools?style=flat&colorA=000000&colorB=259e02)](https://www.npmjs.com/package/jotai-devtools)

## 🚀 Features

- Debug 🐞 atom values with ease
- Out-of-the-box 🔌 support for async/suspendible atoms
Expand All @@ -10,21 +13,22 @@
- ✅ Works with Next.js
- ✅ Supports custom `nonce` for CSP
- ✅ Hides private atoms with ability to configure (requires Jotai `>=2.0.3`)
- ✅ Tree-shakable and built for non-production environments

## Preview
## 📺 Preview

<p>
<a href="https://www.npmjs.com/package/jotai-devtools">
<img alt="Jotai DevTools Screenshot" src="./docs/internal/demo-screenshot.png" width="750"/>
</a>
</p>

## Prerequisites
## ☝️ Prerequisites

- Jotai version `>=1.11.0` (highly recommended to use `2.x.x`)
- React version `>=17.0.0`

## Setup
## 📦 Setup

```sh
# yarn
Expand All @@ -34,12 +38,16 @@ yarn add jotai-devtools
npm install jotai-devtools --save
```

## UI DevTools
## ✨ UI DevTools

Enhance your development experience with the UI based Jotai DevTool

[![Demo](https://img.shields.io/badge/demo-%F0%9F%9A%80-green?style=flat&colorA=000000&colorB=259e02)](https://codesandbox.io/s/jotai-devtools-demo-k5p12d)

### Babel plugin setup - (Optional but highly recommended)

Use Jotai babel plugins for optimal experience. Full guide is available on
[jotai.org](https://jotai.org/docs/tools/babel)
Use Jotai babel plugins for optimal debugging experience. Find the complete
guide on [jotai.org](https://jotai.org/docs/tools/babel)

Eg.

Expand All @@ -56,7 +64,10 @@ Eg.

### Next JS setup

Enable `transpilePackages` for CSS to be imported correctly.
_You may skip this section if you're not using [Next.js](https://nextjs.org)._

Enable `transpilePackages` for the UI CSS and components to be transpiled
correctly.

```ts
// next.config.ts
Expand All @@ -70,6 +81,26 @@ const nextConfig = {
module.exports = nextConfig;
```

### Available props

```ts
type DevToolsProps = {
// Defaults to false
isInitialOpen?: boolean;
// pass a custom store
store?: Store;
// Defaults to light
theme?: 'dark' | 'light';
// Custom nonce to allowlist jotai-devtools specific inline styles via CSP
nonce?: string;
options?: {
// Private atoms are used internally in atoms like `atomWithStorage` or `atomWithLocation`, etc. to manage state.
// Defaults to `false`
shouldShowPrivateAtoms?: boolean;
};
};
```

### Provider-less

```tsx
Expand Down Expand Up @@ -103,26 +134,6 @@ const App = () => {
};
```

### Available props

```ts
type DevToolsProps = {
// defaults to false
isInitialOpen?: boolean;
// pass a custom store
store?: Store;
// Defaults to light
theme?: 'dark' | 'light';
// Custom nonce to allowlist jotai-devtools specific inline styles via CSP
nonce?: string;
options?: {
// Private atoms are used internally in atoms like `atomWithStorage` or `atomWithLocation`, etc. to manage state.
// Defaults to `false`
shouldShowPrivateAtoms?: boolean;
};
};
```

## Hooks

Detailed documentation is available on
Expand Down
6 changes: 3 additions & 3 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@
},
"repository": {
"type": "git",
"url": "https://github.com/jotai-labs/jotai-devtools.git"
"url": "https://github.com/jotaijs/jotai-devtools.git"
},
"keywords": [
"jotai",
Expand All @@ -74,9 +74,9 @@
],
"license": "MIT",
"bugs": {
"url": "https://github.com/jotai-labs/jotai-devtools/issues"
"url": "https://github.com/jotaijs/jotai-devtools/issues"
},
"homepage": "https://github.com/jotai-labs/jotai-devtools",
"homepage": "https://github.com/jotaijs/jotai-devtools",
"engines": {
"node": ">=14.0.0"
},
Expand Down

0 comments on commit a31a8a2

Please sign in to comment.