Skip to content

react-hook-form/devtools-extension

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 

History

85 Commits
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

LogoScreenshot

Requirement

Usage

  1. Install extension in Chrome Web Store
    Or build it yourself / download the release file (then goto Development Run third step)
  2. Install devtools in your project
npm install @hookform/devtools -D
  1. Add DevTool component in your code
    This won't show devtool component anymore! Just for extension detect your form
  2. (Optional) Add custom form id: <DevTool id="YourFormId" control={control} />
    If you don't add it manually, it will be auto generated by uuid
  3. Enjoy!

Development

Install

Note use pnpm only

pnpm install

Run

  1. Run example webpage

  2. Run extension in development mode

pnpm run dev
  1. Open Chrome and navigate to chrome://extensions

  2. Enable Developer mode

  3. Click Load unpacked button and select /dist

Messaging Flow

sequenceDiagram
  participant Webpage
  participant Content Script
  participant Background
  participant Devtools
  participant Popup
  Background->>Background: Cleanup Cache
  Content Script->>Webpage: INIT
  Note left of Webpage: Browser has devtools extension
  Webpage->>Content Script: WELCOME
  Content Script->>Background: WELCOME
  Note right of Background: Webpage has rhf
  Background->>Background: Cache enabled tab
  par
    Popup->>Background: get-enable-status
    Background-->>Popup: Enable Status (Callback)
  and
    Devtools->>Background: get-enable-status
    Background-->>Devtools: Enable Status (Callback)
  end
  loop
    Webpage->>Content Script: UPDATE
    Content Script->>Background: UPDATE
    Note over Webpage,Background: Data
  end
  Background->>Background: Cache data
  loop Every 100ms
    Devtools->>Background: get-devtool-data
    Background-->>Devtools: Data (Callback)
  end
  Background->>Background: Cleanup Cache
Loading

Production

  1. (Optional) Update package and manifest version
pnpm run update-version -- <version>
  1. Build
pnpm run build
  1. Production files can be found in /dist