diff --git a/packages/react-json-tree/README.md b/packages/react-json-tree/README.md
index 7a55b3e1..100a3c98 100644
--- a/packages/react-json-tree/README.md
+++ b/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
+
+```
+
#### More Options
- `shouldExpandNodeInitially: function(keyPath, data, level)` - determines if node should be expanded when it first renders (root is expanded by default)
diff --git a/packages/react-json-tree/src/JSONNestedNode.tsx b/packages/react-json-tree/src/JSONNestedNode.tsx
index 38aa299c..fe16593f 100644
--- a/packages/react-json-tree/src/JSONNestedNode.tsx
+++ b/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(
@@ -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(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)
diff --git a/packages/react-json-tree/src/expandableButtons.tsx b/packages/react-json-tree/src/expandableButtons.tsx
index 8aa66b25..f6be23a0 100644
--- a/packages/react-json-tree/src/expandableButtons.tsx
+++ b/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);
};
diff --git a/packages/react-json-tree/src/expandableButtonsContext.tsx b/packages/react-json-tree/src/expandableButtonsContext.tsx
index 41e15f47..38dc6017 100644
--- a/packages/react-json-tree/src/expandableButtonsContext.tsx
+++ b/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';
- setShouldExpandNode: any;
+ expandAllState?: 'expand' | 'collapse' | 'default';
+ 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,
- setShouldExpandNode,
+ expandAllState,
+ setExpandAllState,
}),
- [enableDefaultButton, shouldExpandNode]
+ [enableDefaultButton, expandAllState]
);
return (