Skip to content

Commit f1a10e8

Browse files
committed
changed name from react-time-travel to reactime
1 parent e78fa0a commit f1a10e8

File tree

3 files changed

+44
-30
lines changed

3 files changed

+44
-30
lines changed

package/demo.gif

3.65 MB
Loading

package/package.json

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,26 @@
11
{
2-
"name": "react-time-travel",
2+
"name": "reactime",
33
"version": "1.1.1",
44
"description": "A library that helps debug React by memorizing the state of components with every render.",
55
"main": "index.js",
66
"repository": {
77
"type": "git",
8-
"url": "https://github.com/oslabs-beta/react-time-travel"
8+
"url": "https://github.com/oslabs-beta/reactime"
99
},
1010
"scripts": {
1111
"test": "echo \"Error: no test specified\""
1212
},
1313
"peerDependencies": {
14-
"react": ">= 16.8"
14+
"react": "~16.0.0",
15+
"react-dom": "~16.0.0"
1516
},
1617
"keywords": [
1718
"react",
1819
"time",
19-
"travel",
20-
"time-travel",
21-
"timetravel",
22-
"react-time-travel",
23-
"react-timetravel"
20+
"time travel",
21+
"reactime",
22+
"react devtool"
2423
],
2524
"author": "Bryan Lee, Josh Kim, Ryan Dang, Sierra Swaby",
26-
"license": "ISC"
25+
"license": "MIT"
2726
}

package/readme.md

Lines changed: 36 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,35 @@
1-
# React-Time-Travel
1+
# Reactime
2+
3+
![GitHub](https://img.shields.io/github/license/oslabs-beta/reactime)
4+
![Travis (.com) branch](https://img.shields.io/travis/com/oslabs-beta/reactime/dev?label=dev%20build)
5+
![Travis (.com) branch](https://img.shields.io/travis/com/oslabs-beta/reactime/master?label=master%20build)
6+
![npm](https://img.shields.io/npm/v/reactime?color=green)
7+
![David](https://img.shields.io/david/oslabs-beta/reactime)
8+
![DevDependencies](https://img.shields.io/david/dev/oslabs-beta/reactime.svg)
9+
![Snyk Vulnerabilities for GitHub Repo](https://img.shields.io/snyk/vulnerabilities/github/oslabs-beta/reactime)
10+
11+
<p align="center">
12+
<img src="demo.gif" alt="Demo of Reactime">
13+
</p>
214

315
A debugging tool for React. Records state whenever state is changed and allows user to jump to any previous recorded state.
416

517
Two parts are needed for this tool to function. The chrome extension must be installed, and the NPM package must be installed and used in the React code.
618

719
## Installing
820

9-
1. Download the Chrome extension from Chrome Web Store.
21+
1. Download the [extension](https://chrome.google.com/webstore/detail/reactime/cgibknllccemdnfhfpmjhffpjfeidjga) from Chrome Web Store.
22+
23+
2. Install the [npm package](https://www.npmjs.com/package/reactime) in your code.
1024

11-
2. Install the [npm package](https://www.npmjs.com/package/react-time-travel) in your code.
1225
```
13-
npm i react-time-travel
26+
npm i reactime
1427
```
28+
1529
3. Call the library method on your root container after rendering your App.
1630

1731
```
18-
const reactTimeTravel = require('react-time-travel');
32+
const reactTimeTravel = require('reactime');
1933
2034
const rootContainer = document.getElementById('root');
2135
ReactDom.render(<App />, rootContainer);
@@ -27,19 +41,19 @@ reactTimeTravel(rootContainer);
2741

2842
## How to Use
2943

30-
After installing both the Chrome extension and the npm package, just open up your project in the browser.
44+
After installing both the Chrome extension and the npm package, just open up your project in the browser.
3145

32-
Then open up your Chrome DevTools. There'll be a new tab called React-Time-Travel.
46+
Then open up your Chrome DevTools. There'll be a new tab called reactime.
3347

3448
## Features
3549

3650
### Recording
3751

38-
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 React-Time-Travel panel.
52+
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.
3953

4054
### Viewing
4155

42-
You can click on a snapshot to view your app's state. State can be visualized in a JSON or a tree.
56+
You can click on a snapshot to view your app's state. State can be visualized in a JSON or a tree.
4357

4458
The selected snapshot can also be diffed/compared with the current dom.
4559

@@ -49,21 +63,22 @@ The most important feature of all. Jumping to any previous recorded snapshot. Hi
4963

5064
### Others
5165

52-
Other handy features include:
53-
* multiple tabs support
54-
* a slider to move through snapshots quickly
55-
* a play button to move through snapshots automatically
56-
* a pause which button stops recording each snapshot
57-
* a lock button to freeze the DOM in place. setState will lose all functionality while the extension is locked
58-
* a persist button to keep snapshots upon refresh. handy when changing code and debugging
59-
* export/import the current snapshots in memory
66+
Other handy features include:
67+
68+
- multiple tabs support
69+
- a slider to move through snapshots quickly
70+
- a play button to move through snapshots automatically
71+
- a pause which button stops recording each snapshot
72+
- a lock button to freeze the DOM in place. setState will lose all functionality while the extension is locked
73+
- a persist button to keep snapshots upon refresh. handy when changing code and debugging
74+
- export/import the current snapshots in memory
6075

6176
## Authors
6277

63-
* **Ryan Dang** - [@rydang](https://github.com/rydang)
64-
* **Bryan Lee** - [@mylee1995](https://github.com/mylee1995)
65-
* **Josh Kim** - [@joshua0308](https://github.com/joshua0308)
66-
* **Sierra Swaby** - [@starkspark](https://github.com/starkspark)
78+
- **Ryan Dang** - [@rydang](https://github.com/rydang)
79+
- **Bryan Lee** - [@mylee1995](https://github.com/mylee1995)
80+
- **Josh Kim** - [@joshua0308](https://github.com/joshua0308)
81+
- **Sierra Swaby** - [@starkspark](https://github.com/starkspark)
6782

6883
## License
6984

0 commit comments

Comments
 (0)