how to use sparnatural library in react js web application

[srinivasAarth]

is there any way to integrate this library with react web application
please request all those who have some knowledge on how to integrate this component into react js and if in case it's possible can I get the implementation steps, please
example how can I replace the TTL config file and settings file? I'm but confusing how can I do
if anyone gives steps like this
step-1
// npm install something like
step-2
// do something again
just like this that would be so appreciatable

I will have to complete this project as soon as possible I have close deadlines 😒

[tfrancart]

• We have just released first version on NPM here : https://www.npmjs.com/package/sparnatural/v/8.0.0
• See the corresponding Github release at https://github.com/sparna-git/Sparnatural/releases/tag/8.0.0
• See the docs to integrate in the webpage at http://docs.sparnatural.eu/Javascript-integration

[srinivasAarth]

really thanks for the response.
sorry for the basic question
I'm facing one issue here like <spar-natural ></spar-natural> this component is not exporting from that package
I'm trying to import that component in the app.js component its not recognising
do we have to use this <spar-natural > tag in html file ? or does it work inside the JSX

i have tried it like this below

import React from "react";
import {spar-natural} from "not importing"
const App = () => {
  return (
    <>
      <div>
        <spar-natural
          src="sparnatural-config.ttl"
          endpoint="https://proxy.sparnatural.eu/sparql-proxy/sparql?endpoint=http%3A%2F%2Ffr.dbpedia.org%2Fsparql"
          lang="fr"
          distinct="true"
          limit="1000"
          debug="true"
        ></spar-natural>
      </div>
    </>
  );
};

please could you help me out from this issue
how can we import <spar-natural> component into the react component
i think according to the react documentation component can't recognize the dash( - ) If component name have dash

thanks advance!!

[tfrancart]

@SteinerPascal can you provide guidance on how to integrate Sparnatural in React ? Thanks

[srinivasAarth]

@tfrancart thanks for the response, I understood how to use this react. I have found one document sparnatural with jsx integration
I have implemented it in react its working as like we expected
But i have one more doubt here

1. Do we have to integrate yasgui saperatly or sparnatural npm does included in itself
2. I have diferent JSON-LD file its not accepting that structure while config file passes to spar-natural element

Please Could you give some suggestions if you have any like how to overcome JSON-LD format

[tfrancart]

Do we have to integrate yasgui saperatly or sparnatural npm does included in itself

You hae to integrate it separately. Sparnatural is independant from YasGUI.

Please Could you give some suggestions if you have any like how to overcome JSON-LD format

Your file MUST conform to the structure described at http://docs.sparnatural.eu/JSON-based-configuration

[SteinerPascal]

Sorry @srinivasAarth, I completly missed the discussion here.
which version are you using?
Regarding the JSON-LD file please follow the advise from @tfrancart .
If it is really not working out then you can post it here and I might spot the error.
Don't forget to check the dev console in your browser for any errormessages.

[SteinerPascal]

also have a look at this: https://docs.sparnatural.eu/react-integration