|
1 | 1 |  |
2 | 2 |
|
3 | | -[](https://www.npmjs.com/package/react-json-view) [](https://github.com/mac-s-g/react-json-view/blob/master/LISCENSE) [](https://travis-ci.org/mac-s-g/react-json-view) [](https://coveralls.io/github/mac-s-g/react-json-view?branch=master) |
| 3 | +[](https://www.npmjs.com/package/react-json-view) [](https://github.com/mac-s-g/react-json-view/blob/master/LISCENSE) [](https://travis-ci.org/mac-s-g/react-json-view) [](https://coveralls.io/github/mac-s-g/react-json-view?branch=master) [](https://spectrum.chat/react-json-view) |
4 | 4 |
|
5 | 5 | # react-json-view |
6 | 6 | RJV is a react component for displaying and editing javascript **arrays** and **JSON objects**. |
@@ -48,6 +48,7 @@ Name|Type|Default|Description |
48 | 48 | `indentWidth`|`integer`|4|Set the indent-width for nested objects |
49 | 49 | `collapsed`|`boolean` or `integer`|`false`|When set to `true`, all nodes will be collapsed by default. Use an integer value to collapse at a particular depth. |
50 | 50 | `collapseStringsAfterLength`|`integer`|`false`|When an integer value is assigned, strings will be cut off at that length. Collapsed strings are followed by an ellipsis. String content can be expanded and collapsed by clicking on the string value. |
| 51 | +`shouldCollapse`|`(field)=>{}`|`false`|Callback function to provide control over what objects and arrays should be collapsed by default. An object is passed to the callback containing `name`, `src`, `type` ("array" or "object") and `namespace`. |
51 | 52 | `groupArraysAfterLength`|`integer`|`100`|When an integer value is assigned, arrays will be displayed in groups by count of the value. Groups are displayed with brakcet notation and can be expanded and collapsed by clickong on the brackets. |
52 | 53 | `enableClipboard`|`boolean` or `(copy)=>{}`|`true`|When prop is not `false`, the user can copy objects and arrays to clipboard by clicking on the clipboard icon. Copy callbacks are supported. |
53 | 54 | `displayObjectSize`|`boolean`|`true`|When set to `true`, objects and arrays are labeled with size |
@@ -108,47 +109,36 @@ The following object will be passed to your method: |
108 | 109 | Returning `false` from a callback method will prevent the src from being affected. |
109 | 110 |
|
110 | 111 | ### Contributing to the source code |
111 | | -#### Linux and Docker (Recommended) |
112 | | -Use Docker to run the source code in a local development environment: |
113 | | - 1. Clone this repo |
114 | | - 2. Build the docker image |
115 | | - * `cd react-json-view` |
116 | | - * `./docker/build-container.sh` |
117 | | - * *note:* you may need to use `sudo` to run docker commands |
118 | | - 3. Run the docker container on port 2000. This will run the webpack-dev-server with hot-reloading enabled. |
119 | | - * `./docker/dev-server.sh` |
120 | | - * *note:* you may need to use `sudo` to run the server file |
121 | | - 4. Open port 2000 in your browser |
122 | | - * navigate to localhost:2000 |
123 | | - |
124 | | -Your source code will be mounted inside the docker container. The container is built on the latest `Node:slim` image. |
125 | | - |
126 | | -Webpack-dev-server is running in the container and hot-reloading when changes are made locally. |
127 | | - |
128 | | -All node modules are installed within the container, so make sure to rebuild your container if you make changes to package.json (see step 2, above). |
129 | | - |
130 | | -#### Standard Workflow |
131 | | -Development workflow is setup for linux users with Docker installed. You can contribute with other configurations but I have not tested them. |
132 | | - |
133 | | - 1. Clone this repo |
134 | | - 2. Install npm dependencies |
| 112 | +#### Run the Dev Server |
| 113 | + |
| 114 | +```bash |
| 115 | +# clone this repository |
| 116 | +git clone [email protected]:mac-s-g/react-json-view.git && cd react-json-view |
| 117 | +# install dependencies |
| 118 | +npm install --save-dev |
| 119 | +# run the dev server with hot reloading |
| 120 | +npm run dev |
135 | 121 | ``` |
136 | | -cd react-json-view |
137 | | -npm install |
| 122 | +Webpack Dev Server should automatically open up http://localhost:2000 in your web browser. If it does not, open a browser and navigate to port 2000. The hot reloader will automatically reload when files are modified in the `/src/` directory. |
| 123 | + |
| 124 | +#### Run the Production Build |
| 125 | + |
| 126 | +```bash |
| 127 | +# run the build (note: you may need to use `sudo` priveledges to run the build successfully) |
| 128 | +npm run build |
138 | 129 | ``` |
139 | | - 3. Run webpack to start webpack-dev-server with hot-reloading enabled |
140 | | - * `npm run dev:hot` |
141 | | - 4. Open port 2000 in your browser |
142 | | - * navigate to localhost:2000 |
| 130 | +Please add tests for your code before posting a pull request. |
| 131 | + |
| 132 | +You can run the test suite with `npm run test` or `npm run test:watch` to automatically reload when files are modified. |
| 133 | + |
| 134 | +#### Docker Tools |
| 135 | + |
| 136 | +I recommend using docker for development because it enforces environmental consistency. |
| 137 | + |
| 138 | +For information about contributing with Docker, see the [README in ./docker](https://github.com/mac-s-g/react-json-view/blob/master/docker/README.md#contributing-to-this-project-using-docker). |
| 139 | + |
143 | 140 |
|
144 | 141 | ### Inspiration |
145 | 142 | I drew a ton of design ideas from [react-json-tree](https://github.com/alexkuz/react-json-tree). Thanks to the RJT contributors for putting together an awesome component! |
146 | 143 |
|
147 | | -I'm also inspired by users who come up with interesting feature requests. Reach out to me with ideas for this project or other projects you want to collaborate on. My email address is listed on my [github user page](https://github.com/mac-s-g). |
148 | | - |
149 | | -### To-Do's |
150 | | -1. Improve documentation for `onEdit`, `onAdd` and `onDelete` props |
151 | | -2. Improve style organization |
152 | | -3. Continue size analysis and remove larger dependencies from build where possible |
153 | | -4. As always, improve test quality and coverage |
154 | | -5. update screenshots and docs in README |
| 144 | +I'm also inspired by users who come up with interesting feature requests. Reach out to me with ideas for this project or other projects you want to collaborate on. My email address is listed on my [github user page](https://github.com/mac-s-g). |
0 commit comments