README.md

Custom Component Library

A collection of Custom Components for json-edit-react.

You can use these as-is or modify them for your own particular use case.

Eventually, I'd like to publish these in a separate package so you can easily import them. But for now just copy the code out of this repo.

Contains a Vite web-app for previewing and developing components.

The individual components are in the /components folder.

There is a React app provided for demo-ing and testing these components -- Development below.

Components

These are the ones currently available:

• Hyperlink/URL
• Undefined
• Date Object
• Date/Time Picker (with ISO string)
• Boolean Toggle
• NaN
• BigInt
• Markdown
• "Enhanced" link
• Image
• Colour picker

Development

From within this folder: /custom-component-library:

Install dependencies:

yarn install

Launch app:

yarn dev

Guidelines for development:

Custom components should consider the following:

• Must respect editing restrictions
• If including CSS classes, please prefix with jer-
• Handle keyboard input as much as possible:
  • Double-click to edit (if allowed)
  • Tab/Shift-Tab to navigate
  • Enter to submit
  • Escape to cancel
• Provide customisation options, particularly styles (but make sure to specify defaults)
• If the data contains non-JSON types, add a "stringify" and "reviver" function definition (see BigInt, NaN and Symbol components)

If your custom component is "string-like", there are two helper components exported with the package: StringDisplay and StringEdit -- these are the same components used for the actual "string" elements in the main package. See the Hyperlink and BigInt components for examples of how to use them.