Custom value component

Viewer

Loading ....

viewerOptions

{
    ValueComponent: ({ value, schema }) => {
        // render complex values as multiline JSON with 2 space indentation
        if (!(["string", "number", "undefined"].includes(typeof value))) {
            return <CodeBlock language="json">{`${
                JSON.stringify(value, null, 2)
            }`}</CodeBlock>;
        }

        // display elementary values inline.
        const component = <code>{`${value}`}</code>;

        // if schema defines a default value, ensure it is bold wherever it
        // appears (e.g. in an enum)
        if (schema.default && value === schema.default) {
            return <strong>{component}</strong>
        }

        return component;
    }
}

JSON Schema

{
  "$schema": "http://json-schema.org/draft-07/schema#",
  "title": "CustomizationOptions",
  "description": "JSON schema for customized options",
  "type": "object",
  "properties": {
    "customField": {
      "type": "string",
      "description": "A customized or personalized field",
      "enum": [
        "palette",
        "teddyBear",
        "tools",
        "laptop",
        "thread",
        "phone",
        "puzzle",
        "scissors",
        "hammer",
        "note"
      ],
      "default": "palette",
      "examples": [
        "tools",
        "note"
      ]
    },
    "customConstObject": {
      "type": "object",
      "const": {
        "version": 5
      }
    }
  },
  "required": [
    "customField"
  ],
  "additionalProperties": false
}