Describo Crate Builder Component for react

This is a wrapper for the Vue Crate Builder Component for applications using React.

Installation

npm install --save @describo/crate-builder-component-react

or

yarn add @describo/crate-builder-component-react

Usage

1import React, {useState} from 'react';
2import {DescriboCrateBuilder, JSONObject} from "@describo/crate-builder-component-react";
3import "@describo/crate-builder-component-react/style.css";
4
5const exampleCrate = {
6  "@context": "https://w3id.org/ro/crate/1.1/context",
7  "@graph": [
8    {
9      "@type": "CreativeWork",
10      "@id": "ro-crate-metadata.json",
11      "conformsTo": {"@id": "https://w3id.org/ro/crate/1.1"},
12      "about": {"@id": "./"}
13    },
14    {
15      "@id": "./",
16      "identifier": "https://doi.org/10.4225/59/11111111",
17      "@type": "Dataset",
18      "datePublished": "2017",
19      "name": "Dataset name",
20      "description": "Dataset description",
21    }
22  ]
23}
24
25function App() {
26  const [crate, setCrate] = useState<JSONObject>(exampleCrate)
27  return (
28    <>
29      <DescriboCrateBuilder crate={exampleCrate} onSaveCrate={(crateValue) => setCrate(crateValue.crate)} />
30      <pre>
31        {JSON.stringify(crate, null, 2)}
32      </pre>
33    </>
34  );
35}
36
37export default App;

Note: in the example above we set the inital value of the crate from exampleCrate and not crate so that we don't update the Vue component's crate vaue whenever onSaveCrate() is called, which will cause reloading of teh component and will result in flickering.

Testing

To try the component you can use the included storybook:

npm i
npm run storybook

CSS customization of the crate builder

You can customize some aspects of the crate builder by overriding CSS of various elements. For example, to make the layout tab texts smaller and green you can create a styles.css:

1.el-tabs__header * {
2    font-size: 1rem;
3    color: forestgreen;
4}

and use it in App.tsx like this:

1import React, {useState} from 'react';
2import {DescriboCrateBuilder, JSONObject} from "@describo/crate-builder-component-react";
3import "@describo/crate-builder-component-react/style.css";
4import "./styles.css";
5
6...