Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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: 4 months 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 (over 4 years ago)
- Default Branch: main
- Last Pushed: 2024-10-02T19:29:11.000Z (5 months ago)
- Last Synced: 2024-10-03T08:15:59.398Z (5 months 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
[](https://github.com/vip-git/context-api-dev-tools-extension/actions) [](https://badge.fury.io/js/context-api-dev-tools-extension) [](https://codecov.io/gh/vip-git/context-api-dev-tools-extension) [](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 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}
);
}
```