graphviz-react - npm Package Compare versions

Comparing version 1.0.1 to 1.0.2

lib/Graphviz.d.ts

 import { GraphvizOptions } from 'd3-graphviz';
 import * as React from 'react';
-declare class Graphviz extends React.Component<IGraphvizProps, any> {
+export declare class Graphviz extends React.Component<IGraphvizProps, any> {
     private static count;
@@ -11,3 +11,3 @@ private static defaultOptions;
     componentDidUpdate(): void;
-    private loadGraph;
+    private renderGraph;
     private options;
@@ -19,2 +19,1 @@ }
 }
-export default Graphviz;

lib/Graphviz.js

@@ -1,2 +0,1 @@
-"use strict";
 var __extends = (this && this.__extends) || (function () {
@@ -15,5 +14,4 @@ var extendStatics = function (d, b) {
 })();
-Object.defineProperty(exports, "__esModule", { value: true });
-var d3_graphviz_1 = require("d3-graphviz");
-var React = require("react");
+import { graphviz } from 'd3-graphviz';
+import * as React from 'react';
 var Graphviz = (function (_super) {
@@ -31,9 +29,9 @@ __extends(Graphviz, _super);
     Graphviz.prototype.componentDidMount = function () {
-        this.loadGraph();
+        this.renderGraph();
     };
     Graphviz.prototype.componentDidUpdate = function () {
-        this.loadGraph();
+        this.renderGraph();
     };
-    Graphviz.prototype.loadGraph = function () {
-        d3_graphviz_1.graphviz('#' + this.id)
+    Graphviz.prototype.renderGraph = function () {
+        graphviz('#' + this.id)
             .options(this.options())
@@ -62,3 +60,3 @@ .renderDot(this.props.dot);
 }(React.Component));
-exports.default = Graphviz;
+export { Graphviz };
 //# sourceMappingURL=Graphviz.js.map

package.json

 {
   "name": "graphviz-react",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "React component for displaying Graphviz graphs",
@@ -5,0 +5,0 @@ "main": "./lib/Graphviz.js",

README.md

 # graphviz-react
 `graphviz-react` provides a simple to use component for rendering Graphviz objects in React. It effectively acts as a React-flavoured wrapper over the [d3-graphviz](https://www.npmjs.com/package/d3-graphviz) library, providing a uniform way to use the renderer. `graphviz-react` is written in Typescript and provides typing declarations. 
 
+## Install
+From the root directory of your React project run the following command.
+```
+npm install graphviz-react
+```
+
 ## Usage
+Add an import to the top of the component you wish to use Graphviz with.
+```javascript
+import { Graphviz } from 'graphviz-react';
+```
 To render a Graphviz component as part of an existing React component simply include the Graphviz tag as part of that component's `render` function along with the `dot` prop.
 
 The below shows a simple React component using the Graphviz component to render a simple DOT string.
-```
+```jsx
 class MyComponent extends Component {
@@ -24,3 +34,3 @@ render() {
 `options` is an optional array of rendering options for the component. It is aligned with the options accepted by the d3-graphviz renderer (see the [API](https://www.npmjs.com/package/d3-graphviz#creating-a-graphviz-renderer) for details). The follow values are set by default:
-```        
+```javascript        
 fit: true
@@ -27,0 +37,0 @@ height: 500

No alert changes

Improved metrics

Total package byte prevSize

9918

increased by1.89%

Number of lines in readme file

44

increased by29.41%

Worsened metrics

Lines of code

146

decreased by-2.01%

No dependency changes