link-redux v2.1.2

Link Redux

A Link to the Web

Use this to enable Link in React. It provides components to build data-independent semantic applications for the human consumption of linked data with React and Redux.

To transform your Rails application into a linked-data serving beast, see our Active Model Serializers plugin.

This was built at Argu, if you like what we do, these technologies or open data, send us a mail.

Road to 1.0

We're busy building the next version of link lib/redux, since there are a lot of changes, the documentation is generally outdated, so the tests are a good place to look for the current API.

Basic Usage

Wrap the main React tree with a LinkedRenderStore:

import configureStore from './configureStore';
import LinkedRenderStore from './configureRenderStore';
import { RenderStoreProvider } from 'link-redux';

export default () => (
  <Provider store={configureStore()}>
    <RenderStoreProvider linkedRenderStore={LinkedRenderStore}>
      <Router history="" />
    </RenderStoreProvider>
  </Provider>
);

Displaying properties

You can now use the provided Property component anywhere to render properties of the displayed object:

const SomeTypeRenderer = () => (
  <div>
    <Property label="http://schema.org/name" />
    <Property label="http://schema.org/text" />
  </div>
);

Custom Type renderer

Register your view with the render store so it knows that it can use your view to render a certain type with it:

const Thing = () => (
  <Card>
    <Property label="http://schema.org/name" />
    <Property label="http://schema.org/description" />
  </Card>
);

LinkedRenderStore.registerRenderer(Thing, 'http://schema.org/Thing');

Custom Property renderer

When using a function to render properties, the attribute is passed as the linkedProp property.

const Name = ({ linkedProp }) => (
  <Heading size="2">
    {linkedProp.value}
  </Heading>
);

To retrieve the correct property value from the state is no easy task, so when creating complex components that need raw access to a property, it is advisable to extend from the PropertyBase component which provides some useful methods to interact with the underlying properties:

class ComplexName extends PropertyBase {
  render() {
    return (
      <Heading size="2">
        {processSpecialName(this.getLinkedObjectPropertyRaw())}
      </Heading>
    );
  }
}

Since a Property renderer is just a special-case type renderer, we need to register it as well, but with an additional argument; the property which it is designed to render:

LinkedRenderStore.registerRenderer(
  Name,
  'http://schema.org/CreativeWork',
  'http://schema.org/name'
);

Further usage

IRI expansion

Since writing out the entire IRI every time is quite some work, the system also accepts the short-form notation (compact terms):

  LinkedRenderStore.registerRenderer(Thing, 'schema:Thing');

  <Property label="schema:name" />

See the link-lib documentation for a list of preincluded shorthand definitions.

Multi-IRI

Most components wouldn't be very useful if they can only render one type of term. Therefore, most of the methods accept an array of terms as well:

LinkedRenderStore.registerRenderer(Thing, ['http://schema.org/Thing', 'owl:Thing']);

<Property label={['schema:name', 'rdfs:label']} />