ULB-Darmstadt / shacl-form

HTML5 web component for editing/viewing RDF data that conform to SHACL shapes
https://ulb-darmstadt.github.io/shacl-form/
MIT License
28 stars 5 forks source link

Using with React #2

Closed calummackervoy closed 1 year ago

calummackervoy commented 1 year ago

Hi! Thanks so much for making this library!!

I've managed to use this library with React, documenting below for future users:

function MyApp({ Component, pageProps }: AppProps) { return ( <>

<Component {...pageProps} />
</>

); }

* create a component for `GenericThingForm`:
```typescript
import React from 'react';

interface IGenericThingForm {
    id: string,
    shape: string
};

const GenericThingForm = ({id, shape}: IGenericThingForm) => {

    let form = React.createElement("shacl-form", {
        "data-shapes": shape,
        "id": id,
        "className": "genric-thing-form"
    });

    return (
        <div>
            {form}
        </div>
    );
};

export default GenericThingForm;
s-tittel commented 1 year ago

cool, thanks!

thhck commented 8 months ago

@calummackervoy Using it :) Thanks for sharing it !