@dotwebstack/webcomponents NPM

DotWebStack Web Components

A set of embeddable Linked Data web components, built on React.

Prerequisites

The following tools are required:

Node.js v8 or higher

Installation

These webcomponents can be installed using NPM:

npm install --save @dotwebstack/webcomponents @rdfjs/data-model

And of course, also with Yarn:

yarn add @dotwebstack/webcomponents @rdfjs/data-model

Documentation

Usage with React

Here is an example of using webcomponents within a React application:

import React from 'react';
import { GraphContext, Vocabulary } from '@dotwebstack/webcomponents';

const endpoint = 'https://bag.basisregistraties.overheid.nl/def/bag';

const App = () => (
  <GraphContext src={endpoint}>
    {(store) => (
      <Vocabulary store={store} />
    )}
  </GraphContext>
);

ReactDOM.render(<App />, document.getElementById('root'));

Usage without React

All components are also available by string reference to the renderComponent and createComponent methods. This makes it possible to use web components in a non-React application:

import { createComponent, renderComponent } from '@dotwebstack/webcomponents';

// Alternative method when not using ES6 modules:
// const namedNode = require('@rdfjs/data-model').namedNode;
// const renderComponent = require('@dotwebstack/webcomponents').renderComponent;
// const createComponent = require('@dotwebstack/webcomponents').renderComponent;

renderComponent(
  document.getElementById('root'),
  'GraphContext',
  {
    src: 'https://bag.basisregistraties.overheid.nl/def/bag',
    children: (store: any) => createComponent('Vocabulary', { store }),
  },
);

See the example folder for more configurations.