Skip to content

Commit 35f45ab

Browse files
authored
Update readme.md
Updated readme to include the additional features
1 parent 9f1b3e1 commit 35f45ab

File tree

1 file changed

+9
-7
lines changed

1 file changed

+9
-7
lines changed

readme.md

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<img src ="./assets/readme_logo.png" width="400"/>
33
</p>
44

5-
# Reactime: A Time Travel Debugger for React
5+
<h1 align="center">Reactime: A Time Travel Debugger for React</h1>
66

77
[![GitHub](https://img.shields.io/github/license/oslabs-beta/reactime)](https://github.com/oslabs-beta/reactime)
88
[![Build Status](https://travis-ci.com/oslabs-beta/reactime.svg?branch=master)](https://travis-ci.com/oslabs-beta/reactime)
@@ -19,11 +19,11 @@
1919

2020
Reactime is a debugging tool for React developers. It records state whenever state is changed and allows user to jump to any previous recorded state.
2121

22-
One important thing to note. This devtool is for React apps using only stateful components and prop drilling. If you're using Redux, Hooks, Context, or functional components, this devtool will not function on your app.
22+
This dev tool is for React apps using stateful components and prop drilling, and has experimental support for Context API, Router, Hooks (useState) and functional components.
2323

24-
Another thing is that this library does not work well when mixing React with direct DOM manipulation. Since DOM manipulation doesn't change any React state, this library cannot record or even detect that change. Of course, you should be avoiding mixing the two in the first place.
24+
One thing to note is that this library does not work well when mixing React with direct DOM manipulation. Since DOM manipulation doesn't change any React state, this library cannot record or even detect that change. Of course, you should be avoiding mixing the two in the first place.
2525

26-
Two parts are needed for this tool to function. The <a href="https://chrome.google.com/webstore/detail/react-time-travel/cgibknllccemdnfhfpmjhffpjfeidjga">chrome extension</a> must be installed, and the NPM package must be installed and used in the React code.
26+
Two parts are needed for this tool to function. The <a href="https://chrome.google.com/webstore/detail/react-time-travel/cgibknllccemdnfhfpmjhffpjfeidjga"><strong>chrome extension</strong></a> must be installed, and the <strong>NPM package</strong> must be installed and used in the React code.
2727

2828
After successfully installing the chrome extension, you can test Reactime functionalities in the demo repositories below.
2929

@@ -40,15 +40,15 @@ After successfully installing the chrome extension, you can test Reactime functi
4040
npm i reactime
4141
```
4242

43-
3. Call the library method on your root container after rendering your App.
43+
3. Call the library method on your root container and App after rendering your App.
4444

4545
```
4646
const reactime = require('reactime');
4747
4848
const rootContainer = document.getElementById('root');
4949
ReactDOM.render(<App />, rootContainer);
5050
51-
reactime(rootContainer);
51+
reactime(rootContainer, App);
5252
```
5353

5454
4. Done! That's all you have to do to link your React project to our library.
@@ -63,7 +63,7 @@ Then open up your Chrome DevTools. There'll be a new tab called Reactime.
6363

6464
### Recording
6565

66-
Whenever state is changed (whenever setState is called), this extension will create a snapshot of the current state tree and record it. Each snapshot will be displayed in Chrome DevTools under the Reactime panel.
66+
Whenever state is changed (whenever setState or useState is called), this extension will create a snapshot of the current state tree and record it. Each snapshot will be displayed in Chrome DevTools under the Reactime panel.
6767

6868
### Viewing
6969

@@ -77,6 +77,8 @@ Jumping is the most important feature of all. It allows you to jump to any previ
7777

7878
Other handy features include:
7979

80+
- multiple branches depicting state changes
81+
- a hover functionality to view state changes
8082
- multiple tabs support
8183
- a slider to move through snapshots quickly
8284
- a play button to move through snapshots automatically

0 commit comments

Comments
 (0)