The Editor
is a component providing a UI for editing a JSON-LD node object. It relies on immutable-jsonld
.
Simplest possible use:
const Editor = require('react-jsonld-editor')
const render = props => (
<Editor />
)
The simplest possible use is not very useful; it will display an empty JSON-LD node, and there will be no way to modify it.
To make it more useful specify some props:
- The
node
prop is a JSON-LD node object to begin editing; it should be an instance ofJSONLDNode
(fromimmutable-jsonld
. - The
classes
andproperties
props specify the vocabularies to use. Each of these should be an ImmutableMap
with URIs (as strings) for keys andJSONLDNode
s for values. TheJSONLDNode
s should haverdfs:label
s orskos:prefLabel
s. TheJSONLDNode
s in theproperties
Map
may also haverdfs:range
s. See edit-with-lov for an example of how one might create theseMap
s from a stream of triples. - Similarly, the
individuals
prop specifies individual resources that can serve as the objects of properties. It should also be an ImmutableMap
with URIs (as strings) for keys andJSONLDNode
s for values. TheJSONLDNode
s should haverdfs:label
s orskos:prefLabel
s. - If you want users to be able to define new classes and properties on the fly, specify a function for obtaining new identifiers via the
mintID
prop. A very simple example that mints new skolem URIs is here:mintID
- Finally, you can be notified of changes to the JSON-LD node by providing a callback function as the
onSave
prop.
Try the demo or check out its source.
For an example of using the editor with dynamically loaded vocabuaries from Linked Open Vocabularies, see edit-with-lov
(demo, source).
- Allow editing of language-tagged strings with autosuggestion of IANA language and script tags.
- Figure out a strategy for styling. Currently depending on Basscss.