https://github.com/vip-git/context-api-dev-tools-extension

:pager: Port for Redux Dev Tools Extension now using Context API
https://github.com/vip-git/context-api-dev-tools-extension

context-api context-api-dev-tools debug-context-api dev-tools redux-dev redux-devtools-extension time-travel-context-api

Last synced: 19 days ago
JSON representation

:pager: Port for Redux Dev Tools Extension now using Context API

• Host: GitHub
• URL: https://github.com/vip-git/context-api-dev-tools-extension
• Owner: vip-git
• Created: 2020-10-04T17:24:13.000Z (about 4 years ago)
• Default Branch: main
• Last Pushed: 2024-10-02T19:29:11.000Z (about 1 month ago)
• Last Synced: 2024-10-03T08:15:59.398Z (about 1 month ago)
• Topics: context-api, context-api-dev-tools, debug-context-api, dev-tools, redux-dev, redux-devtools-extension, time-travel-context-api
• Language: JavaScript
• Homepage: https://vip-git.github.io/context-api-dev-tools-extension/
• Size: 3.5 MB
• Stars: 8
• Watchers: 2
• Forks: 10
• Open Issues: 7
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Remote Context API - DevTools Extension

[![Build](https://img.shields.io/github/workflow/status/vip-git/context-api-dev-tools-extension/Build-Test-Deploy/main?style=flat)](https://github.com/vip-git/context-api-dev-tools-extension/actions) [![npm version](https://badge.fury.io/js/context-api-dev-tools-extension.svg)](https://badge.fury.io/js/context-api-dev-tools-extension) [![codecov](https://codecov.io/gh/vip-git/context-api-dev-tools-extension/branch/main/graph/badge.svg?token=YLEDGQOZTH)](https://codecov.io/gh/vip-git/context-api-dev-tools-extension) [![Known Vulnerabilities](https://snyk.io/test/github/vip-git/context-api-dev-tools-extension/badge.svg?targetFile=package.json)](https://snyk.io/test/github/vip-git/context-api-dev-tools-extension?targetFile=package.json)

Port for [Redux Dev Tools Extension](https://github.com/zalmoxisus/redux-devtools-extension) now using [Context API](https://reactjs.org/docs/context.html)

```

npm install --save-dev-exact context-api-dev-tools-extension

```

## [Example Demo](https://vip-git.github.io/context-api-dev-tools-extension/)

![](./example/context-api-dev-tools-demo.gif)

## Example using `useReducer`

#### Detailed example can be [seen here](https://github.com/vip-git/context-api-dev-tools-extension/blob/main/example/contexts/TodosContext.tsx)

```

// Library

import useContextDevTools from 'context-api-dev-tools-extension';

export function TodosContextProvider({

  children

}: {

  children: React.ReactNode;

}) {

  // Define reducer

  const [todos, dispatch] = useReducer(todosReducer, initialState);

  

  // Initialize DevTools Extension

  const devTools = useContextDevTools(dispatch);

  

  // Update devtools to send updated state

  useEffect(() => {

    devTools.sendUpdatedState(todos);

  }, [todos, devTools]);

  

  // Mount provider with state context

  return (

    

     

      {children}

     

    

  );

}

```