rename variables and update README

packages/react-json-tree/README.md

@@ -137,6 +137,21 @@ Their full signatures are:
 - `labelRenderer: function(keyPath, nodeType, expanded, expandable)`
 - `valueRenderer: function(valueAsString, value, ...keyPath)`
 
+#### Customize Expandable Buttons
+
+Passing the `expandable` props will activate in the top right corner of the JSONTree component the `expand all/collapse all` buttons. You can pass a JSON to customize the expand all/collapse all icons. The default icons are from [FontAwesome](https://fontawesome.com/).
+
+```jsx
+<JSONTree
+  expandable={{
+    defaultValue: 'expand',
+    expandIcon: /* your custom expand icon */,
+    collapseIcon: /* your custom collapse icon */,
+    defaultIcon: /* your custom restore to default icon */,
+  }}
+/>
+```
+
 #### More Options
 
 - `shouldExpandNodeInitially: function(keyPath, data, level)` - determines if node should be expanded when it first renders (root is expanded by default)

packages/react-json-tree/src/JSONNestedNode.tsx

@@ -113,7 +113,7 @@ export default function JSONNestedNode(props: Props) {
     shouldExpandNodeInitially,
     styling,
   } = props;
-  const { shouldExpandNode, setEnableDefaultButton, setShouldExpandNode } =
+  const { expandAllState, setExpandAllState, setEnableDefaultButton } =
     useExpandableButtonContext();
 
   const [defaultExpanded] = useState<boolean>(
@@ -121,7 +121,7 @@ export default function JSONNestedNode(props: Props) {
     isCircular
       ? false
       : (function getDefault() {
-          switch (shouldExpandNode) {
+          switch (expandAllState) {
             case 'expand':
               return true;
             case 'collapse':
@@ -139,7 +139,7 @@ export default function JSONNestedNode(props: Props) {
    * could lead to a "Maximum update depth exceeded" error */
   const expandedRef = useRef<boolean>(defaultExpanded);
 
-  switch (shouldExpandNode) {
+  switch (expandAllState) {
     case 'expand':
       expandedRef.current = isCircular ? false : true;
       break;
@@ -157,9 +157,9 @@ export default function JSONNestedNode(props: Props) {
       expandedRef.current = !expandedRef.current;
       setTriggerReRender((e) => !e);
       setEnableDefaultButton(true);
-      setShouldExpandNode(undefined);
+      setExpandAllState(undefined);
     }
-  }, [expandable, setEnableDefaultButton, setShouldExpandNode]);
+  }, [expandable, setEnableDefaultButton, setExpandAllState]);
 
   const renderedChildren =
     expandedRef.current || (hideRoot && level === 0)

packages/react-json-tree/src/expandableButtons.tsx

@@ -56,18 +56,18 @@ function ExpandButton({
   expandableDefaultValue,
   expandIcon,
 }: ExpandButtonProps) {
-  const { shouldExpandNode, setShouldExpandNode, setEnableDefaultButton } =
+  const { expandAllState, setExpandAllState, setEnableDefaultButton } =
     useExpandableButtonContext();
 
   const onExpand = () => {
-    setShouldExpandNode('expand');
+    setExpandAllState('expand');
     setEnableDefaultButton(true);
   };
 
-  const isDefault = !shouldExpandNode || shouldExpandNode === 'default';
+  const isDefault = !expandAllState || expandAllState === 'default';
 
   if (
-    shouldExpandNode === 'collapse' ||
+    expandAllState === 'collapse' ||
     (isDefault && expandableDefaultValue === 'expand')
   ) {
     return (
@@ -84,18 +84,18 @@ function CollapseButton({
   expandableDefaultValue,
   collapseIcon,
 }: CollapseButtonProps) {
-  const { shouldExpandNode, setShouldExpandNode, setEnableDefaultButton } =
+  const { expandAllState, setExpandAllState, setEnableDefaultButton } =
     useExpandableButtonContext();
 
   const onCollapse = () => {
-    setShouldExpandNode('collapse');
+    setExpandAllState('collapse');
     setEnableDefaultButton(true);
   };
 
-  const isDefault = !shouldExpandNode || shouldExpandNode === 'default';
+  const isDefault = !expandAllState || expandAllState === 'default';
 
   if (
-    shouldExpandNode === 'expand' ||
+    expandAllState === 'expand' ||
     (isDefault && expandableDefaultValue === 'collapse')
   ) {
     return (
@@ -109,11 +109,11 @@ function CollapseButton({
 }
 
 function DefaultButton({ defaultIcon }: DefaultButtonProps) {
-  const { setShouldExpandNode, setEnableDefaultButton } =
+  const { setExpandAllState, setEnableDefaultButton } =
     useExpandableButtonContext();
 
   const onDefaultCollapse = () => {
-    setShouldExpandNode('default');
+    setExpandAllState('default');
     setEnableDefaultButton(false);
   };
 

packages/react-json-tree/src/expandableButtonsContext.tsx

@@ -12,8 +12,8 @@ import { StylingFunction } from 'react-base16-styling';
 interface Context {
   enableDefaultButton: boolean;
   setEnableDefaultButton: any;
-  shouldExpandNode?: 'expand' | 'collapse' | 'default';
+  expandAllState?: 'expand' | 'collapse' | 'default';
-  setShouldExpandNode: any;
+  setExpandAllState: any;
 }
 
 interface Props {
@@ -30,16 +30,16 @@ function ExpandableButtonsContextProvider({
   styling,
 }: Props) {
   const [enableDefaultButton, setEnableDefaultButton] = useState(false);
-  const [shouldExpandNode, setShouldExpandNode] = useState();
+  const [expandAllState, setExpandAllState] = useState();
 
   const value = useMemo(
     () => ({
       enableDefaultButton,
       setEnableDefaultButton,
-      shouldExpandNode,
+      expandAllState,
-      setShouldExpandNode,
+      setExpandAllState,
     }),
-    [enableDefaultButton, shouldExpandNode]
+    [enableDefaultButton, expandAllState]
   );
 
   return (