react-bootstrap-tree-editor - npm Package Compare versions

Comparing version 0.0.2 to 0.0.3

dist/components/TreeEditorDemo.js

@@ -49,2 +49,3 @@ "use strict";
     };
+    // Keyboard shortcut handling (for Demo only -- see useTreeShortcuts for more)
     React.useEffect(() => {
@@ -77,2 +78,3 @@ const keyDownListener = (e) => {
     }, []); // Leave deps empty (run only once)
+    // Handle setting the search filter
     React.useEffect(() => {
@@ -79,0 +81,0 @@ const subs = new react_sub_unsub_1.Subs();

dist/index.d.ts

@@ -14,1 +14,2 @@ export * from './components/BasicTreeNodeComponent';
 export * from './hooks/useTreeState';
+export * from './utils/utils';

dist/index.js

@@ -32,1 +32,3 @@ "use strict";
 __exportStar(require("./hooks/useTreeState"), exports);
+// Utils
+__exportStar(require("./utils/utils"), exports);

package.json

 {
   "name": "react-bootstrap-tree-editor",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "author": "Justin Mahar <[e-mail]>",
@@ -5,0 +5,0 @@ "description": "An interactive tree editor built on react-bootstrap",

README.md

@@ -20,8 +20,8 @@ <h2 align="center">
 
-This section will contain an overview so people can have a high-level understanding of the project.
+An interactive tree editor built on react-bootstrap.
 
 ### Features include:
 
-- **🚀 List your features, use fun [emojis](https://emojipedia.org/search/?q=rocket)**
-  - Give a little more info on each feature or mention benefits.
+- **🌲 Interactive tree editing**
+  - React-Bootstrap powered component for editing trees
 
@@ -61,12 +61,45 @@ [lock:donate]::🚫---------------------------------------
 
-This section will contain a copy/paste example so people can get started quickly.
+The following will get you up and running quickly with this library. It's highly recommended you check out the [demo](https://justinmahar.github.io/react-bootstrap-tree-editor/?path=/story/stories-demo--demo) and its [source](https://github.com/justinmahar/react-bootstrap-tree-editor/blob/master/src/components/TreeEditorDemo.tsx) once you have the component rendering in your application.
 
+Import the following:
+
 ```jsx
-import { Example } from 'react-bootstrap-tree-editor';
+import { defaultTreeControllerOptions } from '../hooks/TreeControllerOptions';
+import { useTreeController } from '../hooks/useTreeController';
+import { useTreeShortcuts } from '../hooks/useTreeShortcuts';
+import { defaultTreeData, useTreeState } from '../hooks/useTreeState';
+import { BasicTreeNodeComponent } from './BasicTreeNodeComponent';
 ```
 
+Inside your function component:
+
 ```jsx
-<Example label="Example Component" />
+const treeOptions = defaultTreeControllerOptions;
+const [tree, setTree] = useTreeState(defaultTreeData);
+const treeController = useTreeController(tree, setTree, treeOptions);
+const shortcuts = useTreeShortcuts(treeController, document);
+
+// Ensure there's always at least one item to edit
+React.useEffect(() => {
+  if (!treeController.tree.hasChildren()) {
+    const newNodeData = treeController.options.createNewData();
+    const node = treeController.mutations.addChildNodeData(treeController.tree, newNodeData);
+    treeController.focus.setFocusedNode(node);
+  }
+}, [treeController.focus, treeController.mutations, treeController.tree, treeController.options]);
 ```
 
+Render the component: 
+
+```jsx
+<BasicTreeNodeComponent
+  node={treeController.tree}
+  treeController={treeController}
+  editable={true}
+  shortcuts={shortcuts}
+  showBullets={false}
+  showPointer={false}
+/>
+```
+
 [lock:typescript]::🚫---------------------------------------
@@ -73,0 +106,0 @@

No alert changes

Improved metrics

Total package byte prevSize

175665

0.92%

Lines of code

1725

0.29%

Number of lines in readme file

137

31.73%

No dependency changes