Skip to content

Commit 803828a

Browse files
authored
Merge pull request mac-s-g#64 from mac-s-g/custom-themes
Custom themes
2 parents 4690981 + c8879c6 commit 803828a

File tree

5 files changed

+69
-5
lines changed

5 files changed

+69
-5
lines changed

README.md

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -61,9 +61,10 @@ Name|Type|Default|Description
6161
* Base-16 Theme Support
6262

6363
### Customizing Style
64+
#### Stock Themes
6465
RJV now supports base-16 themes!
6566

66-
You can specify a `theme` prop when you instantiate your rjv component.
67+
You can specify a `theme` name or object when you instantiate your rjv component.
6768
```
6869
<ReactJson src={my_important_json} theme="monokai" />
6970
```
@@ -75,6 +76,9 @@ Check out the [list of supported themes here](https://github.com/gaearon/base16-
7576
#### Solarized theme example
7677
![alt text](https://github.com/mac-s-g/react-json-view/blob/master/doc/output-example-solarized-2.png?raw=true "Base-16 Theme Example")
7778

79+
#### Use Your Own Theme
80+
You can supply your own base-16 theme object.
81+
7882
### onEdit Interaction
7983
Click the pencil icon to initialize an edit
8084

example/example.js

Lines changed: 28 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ ReactDom.render(
1313
{/* just pass in your JSON to the src attribute */}
1414
<JsonViewer
1515
src={getExampleJson1()}
16-
collapseStringsAfterLength={2}
16+
collapseStringsAfterLength={12}
1717
onEdit={(edit)=>{console.log(edit)}} />
1818

1919
<br />
@@ -56,6 +56,33 @@ ReactDom.render(
5656
src={getExampleArray()}
5757
theme='solarized'
5858
onEdit={(edit)=>{console.log(edit)}} />
59+
60+
<br />
61+
62+
{/* custom theme example */}
63+
<JsonViewer
64+
src={getExampleJson1()}
65+
theme={{
66+
base00: 'white',
67+
base01: '#ddd',
68+
base02: '#ddd',
69+
base03: 'black',
70+
base04: 'black',
71+
base05: 'black',
72+
base06: 'black',
73+
base07: 'black',
74+
base08: 'black',
75+
base09: 'rgba(20, 150, 20, 1)',
76+
base0A: 'black',
77+
base0B: 'black',
78+
base0C: 'black',
79+
base0D: 'black',
80+
base0E: 'black',
81+
base0F: 'black'
82+
}}
83+
/>
84+
85+
5986
</div>,
6087
document.getElementById('app-container')
6188
);

package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "react-json-view",
33
"description": "Interactive react component for displaying javascript arrays and JSON objects.",
4-
"version": "1.9.4",
4+
"version": "1.9.5",
55
"main": "dist/main.js",
66
"files": [
77
"dist/"

src/js/helpers/util.js

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,3 +19,21 @@ export function toType(obj) {
1919
function getType(obj) {
2020
return ({}).toString.call(obj).match(/\s([a-zA-Z]+)/)[1].toLowerCase();
2121
}
22+
23+
//validation for base-16 themes
24+
export function isTheme(theme) {
25+
const theme_keys = [
26+
'base00', 'base01', 'base02', 'base03',
27+
'base04', 'base05', 'base06', 'base07',
28+
'base08', 'base09', 'base0A', 'base0B',
29+
'base0C', 'base0D', 'base0F', 'base0E',
30+
];
31+
if (toType(theme) == 'object') {
32+
for (var i = 0; i < theme_keys.length; i++) {
33+
if (!(theme_keys[i] in theme)) {
34+
return false;
35+
}
36+
}
37+
}
38+
return true;
39+
}

src/js/index.js

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react';
22
import JsonViewer from './components/JsonViewer';
3-
import {toType} from './helpers/util';
3+
import {toType, isTheme} from './helpers/util';
44
import ObjectAttributes from './stores/ObjectAttributes';
55

66
//global theme
@@ -54,11 +54,26 @@ export default class extends React.Component {
5454
}
5555
}
5656

57+
//make sure theme is valid
58+
if (toType(this.state.theme) === 'object'
59+
&& !isTheme(this.state.theme)
60+
) {
61+
console.error(
62+
'react-json-view error:',
63+
'theme prop must be a theme name or valid base-16 theme object.',
64+
'defaulting to "rjv-default" theme'
65+
);
66+
this.state.theme = 'rjv-default';
67+
}
68+
5769
//make sure `src` prop is valid
5870
if (toType(this.state.src) !== 'object'
5971
&& toType(this.state.src) !== 'array'
6072
) {
61-
console.log('ERROR: src property must be a valid json object');
73+
console.error(
74+
'react-json-view error:',
75+
'src property must be a valid json object'
76+
);
6277
this.state.name = 'ERROR';
6378
this.state.src = {
6479
message: 'src property must be a valid json object'

0 commit comments

Comments
 (0)