react-object-table-viewer - npm Package Compare versions

Comparing version 1.0.0 to 1.0.1

CHANGELOG.md

+# v1.0.1
+- added style, className param
+
+# v1.0.0
+- release

files.d.ts

+declare module "*.json" {
+  const value: any;
+  export default value;
+}

pages/components/CodeBlock.tsx

+import React, { FC, ReactNode } from 'react';
+
+interface PropTypes {
+  children?: ReactNode;
+}
+const CodeBlock: FC<PropTypes> = (props: PropTypes) => {
+  return (<pre style={{
+    fontSize: '11px',
+    backgroundColor: '#eee',
+  }}>
+    {props.children}
+  </pre>);
+};
+
+export default CodeBlock;

package.json

 {
   "name": "react-object-table-viewer",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "react object table ui",
@@ -5,0 +5,0 @@ "main": "out/cjs",

pages/index.tsx

@@ -6,2 +6,4 @@ import React, {
 import ReactObjectTableViewer from '../src';
+import packages from '../package.json';
+import CodeBlock from './components/CodeBlock';
 
@@ -13,22 +15,30 @@ interface PropTypes {
 const index: FC<PropTypes> = (props: PropTypes) => {
+  const data = {
+    hello: 'world',
+    abc: 123,
+    array: ['1', '2', '3'],
+  };
+
   return <>
-    <h2>react-object-table-viewer</h2>
+    <h1>react-object-table-viewer {packages.version}</h1>
+
+    <h2>How to use</h2>
     <div>
-      <a href="https://github.com/jinkwon/react-object-table-viewer">https://github.com/jinkwon/react-object-table-viewer</a>
+      <a
+        href="https://github.com/jinkwon/react-object-table-viewer">https://github.com/jinkwon/react-object-table-viewer</a>
     </div>
-    <ReactObjectTableViewer data={{
-      hello: 'world',
-      abc: 123,
-      object: {
-        a: 1,
-        b: 2,
-      },
-      array: ['1', '2', '3'],
-      objectArray: [{
-        a: 1,
-      }, {
-        b: 2
-      }]
-    }}/>
+    <h3>Example</h3>
+    <ReactObjectTableViewer
+      style={{
+        fontSize: '12px',
+      }}
+      data={data} />
 
+    <CodeBlock>{`
+<ReactObjectTableViewer
+  style={{
+    fontSize: '12px',
+  }}
+  data={data} />
+    `}</CodeBlock>
   </>;
@@ -35,0 +45,0 @@ };

README.md

@@ -1,1 +0,36 @@
-# react-object-table
+# react-object-table-viewer
+Object render to table viewer
+### [Live Demo](https://jinkwon.github.io/react-object-table-viewer)
+
+# Installation
+```shell
+npm install -- save react-object-table-viewer
+```
+
+or
+
+```shell
+yarn add react-object-table-viewer
+```
+
+# Usage
+
+```javascript
+import ReactObjectTableViewer from 'react-object-table-viewer';
+
+const App = () => {
+  const data = {
+    hello: 'world',
+    abc: 123,
+    array: ['1', '2', '3'],
+  };
+
+  return <>
+    <ReactObjectTableViewer
+      style={{
+        fontSize: '14px',
+      }}
+      data={data}/>
+  </>
+};
+```

tsconfig.json

@@ -28,2 +28,3 @@ {
   "include": [
+    "./files.d.ts",
     "**/*.ts",
@@ -30,0 +31,0 @@ "**/*.tsx"

No alert changes

Improved metrics

Total package byte prevSize

14037

9.55%

Number of package files

27

12.5%

Lines of code

285

9.62%

Number of lines in readme file

37

3600%

No dependency changes