You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
<imgsrc="demo.gif"alt="Demo of Reactime"style="width: 55%">
18
-
</p>
10
+
11
+
19
12
20
-
Reactime is a debugging tool for React developers. It records state whenever it is changed and allows the user to jump to any previously recorded state.
21
13
22
-
This dev tool is for React apps using stateful components and prop drilling, and has beta support for Context API, conditional state routing, Hooks (useState & useEffect) and functional components.
14
+
Reactime is a debugging tool for React developers. It records state whenever it is changed and allows the user to jump to any previously recorded state.
23
15
24
-
One thing to note is that this library does not work well when mixing React with direct DOM manipulation.
16
+
This tool is for React apps using stateful components and prop drilling, and has beta support for Context API, conditional state routing, Hooks (useState, useEffect) and functional components.
25
17
26
-
Two parts are needed for this tool to function. The [**chrome extension**](https://chrome.google.com/webstore/detail/react-time-travel/cgibknllccemdnfhfpmjhffpjfeidjga) must be installed, and the [**NPM package**](https://www.npmjs.com/package/reactime) must be installed and used in the React code.
18
+
The latest release extends the core functionality by including support for TypeScript applications, improving the user experience through more declarative titles in the actions panel, and extending support for components with conditional state fields. The testing suite has also been expanded with the inclusion of a Sandbox utility to aid future expansion as well as additional E2E and integration tests with Puppeteer and React Testing Library.
27
19
28
-
After successfully installing the chrome extension, you can test Reactime functionalities in the demo repositories below.
20
+
After installing the Reactime, you can test its functionalities in the following demo repositories:
Reactime was nominated for the Productivity Booster award at [React Open Source Awards 2020](https://osawards.com/react/)!
26
+
27
+
## Installation
34
28
35
-
1. Download the [extension](https://chrome.google.com/webstore/detail/reactime/cgibknllccemdnfhfpmjhffpjfeidjga)from Chrome Web Store.
29
+
Two parts are required for this tool to function: a [**Chrome extension**](https://chrome.google.com/webstore/detail/react-time-travel/cgibknllccemdnfhfpmjhffpjfeidjga)and an [**NPM package**](https://www.npmjs.com/package/reactime).
36
30
37
-
2. Install the [npm package](https://www.npmjs.com/package/reactime) in your code.
31
+
1. Install the Reactime [extension](https://chrome.google.com/webstore/detail/reactime/cgibknllccemdnfhfpmjhffpjfeidjga) from Chrome Web Store. Alternatively, use `src/extension/build/build.zip` for manual installation in [Developer mode](https://developer.chrome.com/extensions/faq#faq-dev-01). Turn on 'Allow access to file URLs' in extension details page if testing locally.
32
+
33
+
2. Install the [NPM package](https://www.npmjs.com/package/reactime) in your application's root directory.
38
34
39
35
```
40
36
npm i reactime
@@ -43,21 +39,31 @@ npm i reactime
43
39
3. Call the library method on your root container after rendering your App.
5. Done! That's all you have to do to link your React project to our library.
55
61
56
62
## How to Use
57
63
58
-
After installing both the Chrome extension and the npm package, just open up your project in the browser.
64
+
After installing both the Chrome extension and the NPM package, just open up your project in the browser.
59
65
60
-
Then open up your Chrome DevTools. There'll be a new tab called Reactime.
66
+
Then open up your Chrome DevTools and navigate to the Reactime tab.
61
67
62
68
## Features
63
69
@@ -73,7 +79,11 @@ You can click on a snapshot to view your app's state. State can be visualized in
73
79
74
80
Jumping is the most important feature of all. It allows you to jump to any previous recorded snapshots. Hitting the jump button on any snapshot will change the DOM by setting their state.
75
81
76
-
### And Much More
82
+
### TypeScript Support
83
+
84
+
Reactime offers beta support for TypeScript applications using stateful class components and functional components with useState hooks. Further testing and development is required for custom hooks, Context API, and Concurrent Mode.
85
+
86
+
### Additional Features
77
87
78
88
- multiple tree graph branches depicting state changes
79
89
- tree graph hover functionality to view state changes
@@ -85,6 +95,9 @@ Jumping is the most important feature of all. It allows you to jump to any previ
85
95
- a lock button to freeze the DOM in place. setState will lose all functionality while the extension is locked
86
96
- a persist button to keep snapshots upon refresh (handy when changing code and debugging)
87
97
- export/import the current snapshots in memory
98
+
- declarative titles in the actions panel
99
+
- extended support for components with conditional state fields
100
+
- a Sandbox utility to aid future expansion
88
101
89
102
## Authors
90
103
@@ -100,7 +113,12 @@ Jumping is the most important feature of all. It allows you to jump to any previ
<imgsrc="demo.gif"alt="Demo of Reactime"style="width: 55%">
13
-
</p>
10
+
14
11
15
-
Reactime is a debugging tool for React developers. It records state whenever it is changed and allows the user to jump to any previously recorded state.
16
12
17
-
This dev tool is for React apps using stateful components and prop drilling, and has beta support for Context API, conditional state routing, Hooks (useState, useEffect) and functional components.
18
13
19
-
One thing to note is that this library does not work well when mixing React with direct DOM manipulation.
14
+
Reactime is a debugging tool for React developers. It records state whenever it is changed and allows the user to jump to any previously recorded state.
15
+
16
+
This tool is for React apps using stateful components and prop drilling, and has beta support for Context API, conditional state routing, Hooks (useState, useEffect) and functional components.
20
17
21
-
Two parts are needed for this tool to function. The [**chrome extension**](https://chrome.google.com/webstore/detail/react-time-travel/cgibknllccemdnfhfpmjhffpjfeidjga) must be installed, and the [**NPM package**](https://www.npmjs.com/package/reactime) must be installed and used in the React code. You can also download [**zipped version**](build.zip) of the chrome extension and install it in [Developer mode](https://developer.chrome.com/extensions/faq#faq-dev-01) and turn on 'Allow access to file URLs' in extension details page if testing locally.
18
+
The latest release extends the core functionality by including support for TypeScript applications, improving the user experience through more declarative titles in the actions panel, and extending support for components with conditional state fields. The testing suite has also been expanded with the inclusion of a Sandbox utility to aid future expansion as well as additional E2E and integration tests with Puppeteer and React Testing Library.
22
19
23
-
After successfully installing the chrome extension, you can test Reactime functionalities in the demo repositories below.
20
+
After installing the Reactime, you can test its functionalities in the following demo repositories:
Reactime was nominated for the Productivity Booster award at [React Open Source Awards 2020](https://osawards.com/react/)!
29
26
30
-
1. Download the [extension](https://chrome.google.com/webstore/detail/reactime/cgibknllccemdnfhfpmjhffpjfeidjga) from Chrome Web Store.
27
+
## Installation
31
28
32
-
2. Install the [npm package](https://www.npmjs.com/package/reactime) in your code.
29
+
Two parts are required for this tool to function: a [**Chrome extension**](https://chrome.google.com/webstore/detail/react-time-travel/cgibknllccemdnfhfpmjhffpjfeidjga) and an [**NPM package**](https://www.npmjs.com/package/reactime).
30
+
31
+
1. Install the Reactime [extension](https://chrome.google.com/webstore/detail/reactime/cgibknllccemdnfhfpmjhffpjfeidjga) from Chrome Web Store. Alternatively, use `src/extension/build/build.zip` for manual installation in [Developer mode](https://developer.chrome.com/extensions/faq#faq-dev-01). Turn on 'Allow access to file URLs' in extension details page if testing locally.
32
+
33
+
2. Install the [NPM package](https://www.npmjs.com/package/reactime) in your application's root directory.
33
34
34
35
```
35
36
npm i reactime
@@ -60,9 +61,9 @@ reactime(rootContainer);
60
61
61
62
## How to Use
62
63
63
-
After installing both the Chrome extension and the npm package, just open up your project in the browser.
64
+
After installing both the Chrome extension and the NPM package, just open up your project in the browser.
64
65
65
-
Then open up your Chrome DevTools. There'll be a new tab called Reactime.
66
+
Then open up your Chrome DevTools and navigate to the Reactime tab.
66
67
67
68
## Features
68
69
@@ -78,7 +79,11 @@ You can click on a snapshot to view your app's state. State can be visualized in
78
79
79
80
Jumping is the most important feature of all. It allows you to jump to any previous recorded snapshots. Hitting the jump button on any snapshot will change the DOM by setting their state.
80
81
81
-
### And Much More
82
+
### TypeScript Support
83
+
84
+
Reactime offers beta support for TypeScript applications using stateful class components and functional components with useState hooks. Further testing and development is required for custom hooks, Context API, and Concurrent Mode.
85
+
86
+
### Additional Features
82
87
83
88
- multiple tree graph branches depicting state changes
84
89
- tree graph hover functionality to view state changes
@@ -90,6 +95,9 @@ Jumping is the most important feature of all. It allows you to jump to any previ
90
95
- a lock button to freeze the DOM in place. setState will lose all functionality while the extension is locked
91
96
- a persist button to keep snapshots upon refresh (handy when changing code and debugging)
92
97
- export/import the current snapshots in memory
98
+
- declarative titles in the actions panel
99
+
- extended support for components with conditional state fields
100
+
- a Sandbox utility to aid future expansion
93
101
94
102
## Authors
95
103
@@ -105,7 +113,12 @@ Jumping is the most important feature of all. It allows you to jump to any previ
0 commit comments