项目作者: c0d3t3k

项目描述 :
Redux Devtools integrations for jotai.
高级语言: TypeScript
项目地址: git://github.com/c0d3t3k/jotai-devtools.git
创建时间: 2020-11-01T19:23:53Z
项目社区:https://github.com/c0d3t3k/jotai-devtools

开源协议:

下载


Jotai Devtools

Sample GIF

About

Redux Devtools integration for Jotai. This library only supports the Redux Devtools browser extensions (Chrome, Edge and Firefox). It does not currently support the standalone app or the embedded component.

Installation

NPM Package is coming soon. In the meantime, use the following to install:

  1. yarn add https://github.com/c0d3t3k/jotai-devtools.git

How to use

The Jotai Devtools library creates devtools integration instances on an atom by atom basis. To create a devtools instance, two parameters are required:

  1. {
  2. // The display name for the atom
  3. name: "Count Atom (Hook)",
  4. // The atom to be mapped to a devtools instance
  5. atom: countAtom,
  6. }

Also see the Dev.to Article, Sample Code and CodeSandBox

The library provides two methods to enable a devtools instance:

Hook Method

  1. import React from 'react'
  2. import { useAtom, atom } from 'jotai'
  3. import { useJotaiDevtools, JotaiDevtools } from '@c0d3t3k/jotai-devtools'
  4. // The atom to be monitored by the devtools.
  5. const countAtom = atom(0)
  6. const App: React.FC = () => {
  7. const [count, setCount] = useAtom(countAtom)
  8. // This hook maps the "Count Atom (Hook)" devtools instance to `countAtom`.
  9. useJotaiDevtools({
  10. name: "Count Atom (Hook)",
  11. atom: countAtom
  12. });
  13. // Some functions to modify `countAtom`
  14. const increment = () => {
  15. setCount(count + 1);
  16. }
  17. const decrement = () => {
  18. setCount(count - 1);
  19. }
  20. // The React component tree.
  21. return (
  22. <>
  23. <div>
  24. <h1>Count is {count}</h1>
  25. <button onClick={increment}>Increment Count</button>
  26. <button onClick={decrement}>Decrement Count</button>
  27. </div>
  28. </>
  29. )
  30. }

Component Method

  1. import React from 'react'
  2. import { useAtom, atom } from 'jotai'
  3. import { useJotaiDevtools, JotaiDevtools } from '@c0d3t3k/jotai-devtools'
  4. // The atom to be monitored by the devtools.
  5. const countAtom = atom(0)
  6. const App: React.FC = () => {
  7. const [count, setCount] = useAtom(countAtom)
  8. // Some functions to modify `countAtom`
  9. const increment = () => {
  10. setCount(count + 1);
  11. }
  12. const decrement = () => {
  13. setCount(count - 1);
  14. }
  15. // The React component tree.
  16. return (
  17. <>
  18. {/* This component maps the "Count Atom (Component)" devtools instance to `countAtom`. */}
  19. <JotaiDevtools atom={countAtom} name="Count Atom (Component)"></JotaiDevtools>
  20. <div>
  21. <h1>Count is {count}</h1>
  22. <button onClick={increment}>Increment Count</button>
  23. <button onClick={decrement}>Decrement Count</button>
  24. </div>
  25. </>
  26. )
  27. }

Development

To compile the code once, run

  • npm run build.

To compile the code once and refresh on file change, run

  • npm run start.

To publish the package to npm, make sure you’re logged in the correct account by running

  • npm login.

Compile the package by running

  • npm run build

Update the package version accordingly by using

Then publish the package by running

  • npm publish