National Preventative Mechanism


    0.9.0 • Public • Published

    MarkLogic-UI-Resource (Muir) React Components

    This library provides a set of React components useful for building applications backed by a MarkLogic database.

    Getting Started


    npm install --save ml-treehouse-react


    yarn add ml-treehouse-react


    You will need to create a React container in your host application to pass the necessary props and callback functions to the ML-Treehouse components that you are importing. See the MLSearchContainer in the reference application for an example of doing this, using Redux modules. Also, look at App.js and index.js to see how selectors and actions are passed to MLSearchContainer.


    This component provides a default view of a single document, together with some error handling. It can be customized:

    Providing a custom detail page

    accepts a template attribute that will override the default template when a document is successfully retrieved. It gets passed all the props that itself received. Typically, you will write a React component to render those props as desired. It can then be passed to like so:

    <DetailView template={myCustomDetailComponent} />

    In many cases, in applications using Redux, is the top-level 'dumb' component being wrapped by a 'smart' Redux container. In that case, you can add your template to mapStateToProps directly, as in this example:

    import { DetailView } from 'muir-react';
    import myDetailComponent from '../components/myDetailComponent';
    import { actions, selectors } from 'ml-documents-redux';
    import { bindSelectors } from '../utils/redux-utils';
    const boundSelectors = bindSelectors(selectors, 'documents');
    const mapStateToProps = (state, ownProps) => {
      const sel = boundSelectors;
      return {
        template: myDetailComponent,
        detail: sel.documentByUri(state, ownProps.uri),
        error: sel.errorByUri(state, ownProps.uri),
        contentType: sel.contentTypeByUri(state, ownProps.uri)

    Or, you could allow the code consuming your container to pass in the template, and simply grab it from the ownProps argument from mapStateToProps.


    We are creating a storybook for all the components present in this library. To see it, for the moment, clone this repository and run:

    npm run storybook


    Local Development of ml-treehouse-react

    We need just one version of React, so, assuming your host application is at ../ml-treehouse-react-reference, run the following. (If your host application is in a different directory, you will need to make appropriate changes.)

    npm link ../ml-treehouse-react
    cd ../ml-treehouse-react
    npm link ../ml-treehouse-react-reference/client/node_modules/react


    npm run test

    To run the tests continuously as you change files:

    npm run test:watch

    To get a report on test coverage:

    npm run test:coverage
    open coverage/html/index.html


    Best practice is to add a story for each component that gets exported from this library. We are using Storybook for this, which is a form of live documentation. At least, there should be a story example for each supported state of the component. It is also possible to make interactive examples, though this is more work. See for an example.

    Eventually, we may tie stories together with testing. This could follow the model described in this article.

    To create a story for a component, save it as a new file ending with '.story.js'. See the codebase for examples.

    Code-Style and Linting

    TODO: Describe ESLint, benefits of linting javascript, and the benefits of a common code-style. Also, how to set up editor-support.

    TODO: We should enforce linting as part of the build.

    Optional Badges

    TODO: Evaluate which to keep.

    Travis npm package Coveralls


    npm i muir-react

    DownloadsWeekly Downloads






    Unpacked Size

    4.07 MB

    Total Files


    Last publish


    • pmcelwee