index.d.ts

import * as React from "react";

export interface ReactJsonViewProps {
  /**
   * This property contains your input JSON.
   *
   * Required.
   */
  src: object;
  /**
   * Contains the name of your root node. Use null or false for no name.
   *
   * Default: "root"
   */
  name?: React.JSX.Element | string | null | false;
  /**
   * RJV supports base-16 themes. Check out the list of supported themes in the demo.
   * A custom "rjv-default" theme applies by default.
   *
   * Default: "rjv-default"
   */
  theme?: ThemeKeys | ThemeObject;
  /**
   * Style attributes for react-json-view container.
   * Explicit style attributes will override attributes provided by a theme.
   *
   * Default: "rjv-default"
   */
  style?: React.CSSProperties;
  /**
   * Style of expand/collapse icons. Accepted values are "circle", triangle" or "square".
   *
   * Default: {}
   */
  iconStyle?: "circle" | "triangle" | "square";
  /**
   * Set the indent-width for nested objects.
   *
   * Default: 4
   */
  indentWidth?: number;
  /**
   * When set to true, all nodes will be collapsed by default.
   * Use an integer value to collapse at a particular depth.
   *
   * Default: false
   */
  collapsed?: boolean | number;
  /**
   * When an integer value is assigned, strings will be cut off at that length.
   * Collapsed strings are followed by an ellipsis.
   * String content can be expanded and collapsed by clicking on the string value.
   *
   * Default: false
   */
  collapseStringsAfterLength?: number | false;
  /**
   * Callback function to provide control over what objects and arrays should be collapsed by default.
   * An object is passed to the callback containing name, src, type ("array" or "object") and namespace.
   *
   * Default: false
   */
  shouldCollapse?: false | ((field: CollapsedFieldProps) => boolean);
  /**
   * When an integer value is assigned, arrays will be displayed in groups by count of the value.
   * Groups are displayed with brakcet notation and can be expanded and collapsed by clickong on the brackets.
   *
   * Default: 100
   */
  groupArraysAfterLength?: number;
  /**
   * When prop is not false, the user can copy objects and arrays to clipboard by clicking on the clipboard icon.
   * Copy callbacks are supported.
   *
   * Default: true
   */
  enableClipboard?: boolean | ((copy: OnCopyProps) => void);
  /**
   * When set to true, objects and arrays are labeled with size.
   *
   * Default: true
   */
  displayObjectSize?: boolean;
  /**
   * When set to true, data type labels prefix values.
   *
   * Default: true
   */
  displayDataTypes?: boolean;
  /**
   * When set to true, the index of the elements prefix values
   *
   * Default: true
   */
  displayArrayKey?: boolean;
  /**
   * set to false to remove quotes from keys (eg. "name": vs. name:)
   *
   * Default: true
   */
  quotesOnKeys?: boolean;
  /**
   * When a callback function is passed in, edit functionality is enabled.
   * The callback is invoked before edits are completed. Returning false
   * from onEdit will prevent the change from being made. see: onEdit docs.
   *
   * Default: false
   */
  onEdit?: ((edit: InteractionProps) => false | any) | false;
  /**
   * When a callback function is passed in, add functionality is enabled.
   * The callback is invoked before additions are completed.
   * Returning false from onAdd will prevent the change from being made. see: onAdd docs
   *
   * Default: false
   */
  onAdd?: ((add: InteractionProps) => false | any) | false;
  /**
   * When a callback function is passed in, delete functionality is enabled.
   * The callback is invoked before deletions are completed.
   * Returning false from onDelete will prevent the change from being made. see: onDelete docs
   *
   * Default: false
   */
  onDelete?: ((del: InteractionProps) => false | any) | false;
  /**
   * When a function is passed in, clicking a value triggers the onSelect method to be called.
   *
   * Default: false
   */
  onSelect?: ((select: OnSelectProps) => void) | false;
  /**
   * Custom message for validation failures to onEdit, onAdd, or onDelete callbacks.
   *
   * Default: "Validation Error"
   */
  validationMessage?: string;
  /**
   * Set to true to sort object keys.
   *
   * Default: false
   */
  sortKeys?: boolean;
  /**
   * Set to a value to be used as defaultValue when adding new key to json
   *
   * Default: null
   */
  defaultValue?: TypeDefaultValue | TypeDefaultValue[] | null;
  /**
   * Whether to select the textarea contents on edit
   *
   * Default: false
   */
  selectOnFocus?: boolean;
  /**
   * The key modifier to be combined with a click on JSON values to edit them
   *
   * Default: (e) => e.metaKey || e.ctrlKey
   */
  keyModifier?: (event: Event, type: "edit" | "submit") => boolean;
  /**
   * Set to true to escape strings sequences such as \n, \t, \r, \f
   *
   * Default: true
   */
  escapeStrings?: boolean;

  /**
   * A search term to filter the JSON tree.
   */
  searchTerm?: string;
}

export interface OnCopyProps {
  /**
   * The JSON tree source object
   */
  src: object;
  /**
   * List of keys.
   */
  namespace: Array<string | null>;
  /**
   * The last key in the namespace array.
   */
  name: string | null;
}

export interface CollapsedFieldProps {
  /**
   * The name of the entry.
   */
  name: string | null;
  /**
   * The corresponding JSON subtree.
   */
  src: object;
  /**
   * The type of src. Can only be "array" or "object".
   */
  type: "array" | "object";
  /**
   * The scopes above the current entry.
   */
  namespace: Array<string | null>;
}

export interface InteractionProps {
  /**
   * The updated subtree of the JSON tree.
   */
  updated_src: object;
  /**
   * The existing subtree of the JSON tree.
   */
  existing_src: object;
  /**
   * The key of the entry that is interacted with.
   */
  name: string | null;
  /**
   * List of keys.
   */
  namespace: Array<string | null>;
  /**
   * The original value of the entry that is interacted with.
   */
  existing_value: object | string | number | boolean | null;
  /**
   * The updated value of the entry that is interacted with.
   */
  new_value?: object | string | number | boolean | null;
}

export interface OnSelectProps {
  /**
   * The name of the currently selected entry.
   */
  name: string | null;
  /**
   * The value of the currently selected entry.
   */
  value: object | string | number | boolean | null;
  /**
   * The type of the value. For "number" type, it will be replaced with the more
   * accurate types: "float", "integer", or "nan".
   */
  type: string;
  /**
   * List of keys representing the scopes above the selected entry.
   */
  namespace: Array<string | null>;
}

export type TypeDefaultValue = string | number | boolean | object;

export interface ThemeObject {
  base00: string;
  base01: string;
  base02: string;
  base03: string;
  base04: string;
  base05: string;
  base06: string;
  base07: string;
  base08: string;
  base09: string;
  base0A: string;
  base0B: string;
  base0C: string;
  base0D: string;
  base0E: string;
  base0F: string;
}

export type ThemeKeys =
  | "apathy"
  | "apathy:inverted"
  | "ashes"
  | "bespin"
  | "brewer"
  | "bright:inverted"
  | "bright"
  | "chalk"
  | "codeschool"
  | "colors"
  | "eighties"
  | "embers"
  | "flat"
  | "google"
  | "grayscale"
  | "grayscale:inverted"
  | "greenscreen"
  | "harmonic"
  | "hopscotch"
  | "isotope"
  | "marrakesh"
  | "mocha"
  | "monokai"
  | "ocean"
  | "paraiso"
  | "pop"
  | "railscasts"
  | "rjv-default"
  | "shapeshifter"
  | "shapeshifter:inverted"
  | "solarized"
  | "summerfruit"
  | "summerfruit:inverted"
  | "threezerotwofour"
  | "tomorrow"
  | "tube"
  | "twilight";

declare const ReactJson: React.ComponentType<ReactJsonViewProps>;
export default ReactJson;