Merge pull request mac-s-g#64 from mac-s-g/custom-themes

Custom themes

Author: mac-s-g

README.md

@@ -61,9 +61,10 @@ Name|Type|Default|Description
 * Base-16 Theme Support
 
 ### Customizing Style
+#### Stock Themes
 RJV now supports base-16 themes!
 
-You can specify a `theme` prop when you instantiate your rjv component.
+You can specify a `theme` name or object when you instantiate your rjv component.
 ```
 <ReactJson src={my_important_json} theme="monokai" />
 ```
@@ -75,6 +76,9 @@ Check out the [list of supported themes here](https://github.com/gaearon/base16-
 #### Solarized theme example
 ![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")
 
+#### Use Your Own Theme
+You can supply your own base-16 theme object.
+
 ### onEdit Interaction
 Click the pencil icon to initialize an edit
 

example/example.js

@@ -13,7 +13,7 @@ ReactDom.render(
         {/* just pass in your JSON to the src attribute */}
         <JsonViewer
         src={getExampleJson1()}
-        collapseStringsAfterLength={2}
+        collapseStringsAfterLength={12}
         onEdit={(edit)=>{console.log(edit)}} />
 
         <br />
@@ -56,6 +56,33 @@ ReactDom.render(
         src={getExampleArray()}
         theme='solarized'
         onEdit={(edit)=>{console.log(edit)}} />
+
+        <br />
+
+        {/* custom theme example */}
+        <JsonViewer
+        src={getExampleJson1()}
+        theme={{
+          base00: 'white',
+          base01: '#ddd',
+          base02: '#ddd',
+          base03: 'black',
+          base04: 'black',
+          base05: 'black',
+          base06: 'black',
+          base07: 'black',
+          base08: 'black',
+          base09: 'rgba(20, 150, 20, 1)',
+          base0A: 'black',
+          base0B: 'black',
+          base0C: 'black',
+          base0D: 'black',
+          base0E: 'black',
+          base0F: 'black'
+        }}
+        />
+
+
     </div>,
     document.getElementById('app-container')
 );

package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-json-view",
   "description": "Interactive react component for displaying javascript arrays and JSON objects.",
-  "version": "1.9.4",
+  "version": "1.9.5",
   "main": "dist/main.js",
   "files": [
     "dist/"

src/js/helpers/util.js

@@ -19,3 +19,21 @@ export function toType(obj) {
 function getType(obj) {
     return ({}).toString.call(obj).match(/\s([a-zA-Z]+)/)[1].toLowerCase();
 }
+
+//validation for base-16 themes
+export function isTheme(theme) {
+    const theme_keys = [
+        'base00', 'base01', 'base02', 'base03',
+        'base04', 'base05', 'base06', 'base07',
+        'base08', 'base09', 'base0A', 'base0B',
+        'base0C', 'base0D', 'base0F', 'base0E',
+    ];
+    if (toType(theme) == 'object') {
+        for (var i = 0; i < theme_keys.length; i++) {
+            if (!(theme_keys[i] in theme)) {
+                return false;
+            }
+        }
+    }
+    return true;
+}

src/js/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import JsonViewer from './components/JsonViewer';
-import {toType} from './helpers/util';
+import {toType, isTheme} from './helpers/util';
 import ObjectAttributes from './stores/ObjectAttributes';
 
 //global theme
@@ -54,11 +54,26 @@ export default class extends React.Component {
             }
         }
 
+        //make sure theme is valid
+        if (toType(this.state.theme) === 'object'
+            && !isTheme(this.state.theme)
+        ) {
+            console.error(
+                'react-json-view error:',
+                'theme prop must be a theme name or valid base-16 theme object.',
+                'defaulting to "rjv-default" theme'
+            );
+            this.state.theme = 'rjv-default';
+        }
+
         //make sure `src` prop is valid
         if (toType(this.state.src) !== 'object'
             && toType(this.state.src) !== 'array'
         ) {
-            console.log('ERROR: src property must be a valid json object');
+            console.error(
+                'react-json-view error:',
+                'src property must be a valid json object'
+            );
             this.state.name = 'ERROR';
             this.state.src = {
                 message: 'src property must be a valid json object'