Skip to content

add custom button #475

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
kenneth-matroid wants to merge 7 commits into
base: master
Choose a base branch
from
Open

add custom button #475

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
55f902b
add custom button
kenneth-matroid Dec 22, 2025
199e881
working custom button icon
kenneth-matroid Dec 23, 2025
363ed8f
passing tests
kenneth-matroid Dec 23, 2025
dd0b4de
include namespace for click handlere
kenneth-matroid Dec 23, 2025
11c09a3
allow setting title
kenneth-matroid Dec 23, 2025
e81c650
remove unused variable
kenneth-matroid Jan 5, 2026
ee1b624
support force render
kenneth-matroid Jan 5, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion dev-server/dist/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,6 @@
</head>
<body>
<div id="app-container"></div>
<script type="text/javascript" src="./main.js"></script>
<script type="text/javascript" src="/main.js"></script>
</body>
</html>
10 changes: 10 additions & 0 deletions dev-server/src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,15 @@ import Moment from 'moment';
//import the react-json-view component (installed with npm)
import JsonViewer from './../../src/js/index';

const forcedCustomButtonProps = {
icon: <div>Custom Icon</div>,
onClick: keyAndValue => {
const { value, namespace } = keyAndValue;
console.log({ value, namespace });
},
title: 'Apply filter'
};

//render 2 different examples of the react-json-view component
ReactDom.render(
<div>
Expand All @@ -19,6 +28,7 @@ ReactDom.render(
src={getExampleJson1()}
quotesOnKeys={false}
collapseStringsAfterLength={12}
customButtonProps={forcedCustomButtonProps}
onEdit={e => {
console.log('edit callback', e);
if (e.new_value == 'error') {
Expand Down
13 changes: 13 additions & 0 deletions index.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -141,6 +141,19 @@ export interface ReactJsonViewProps {
* Default: null
*/
defaultValue?: TypeDefaultValue | TypeDefaultValue[] | null;

customButtonProps?: {
/**
* When set to true, the custom button will be shown even if the field is not hovered.
*/
forceShow?: boolean;
icon: React.ReactNode;
/**
* @param data value is the field value, namespace is a list of the entire fields. Suppose the field is "example.parent.sibling1", then namespace is ["example", "parent", "sibling1"]
*/
onClick: (data: { value: any; namespace: Array<string | null> }) => void;
title: string;
};
}

export interface OnCopyProps {
Expand Down
Loading