Skip to content
Common React UI components
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.
src fixed initializationn bug with datepicker Mar 21, 2019
.eslintrc initial very basic header with test May 4, 2018
.gitignore minor fixes in readme Mar 17, 2019
package-lock.json update package-lock.json Mar 11, 2019
styleguide.config.js add styleguidist config Nov 6, 2018

Using React Components

Steps to the react component within your React project

Add @openmrs/react-components as a dependency

npm install @openmrs/react-components

Add babel-polyfill as a dependency and import it

Saga requires that babel-polyfill be installed and configured for your project:

npm install babel-polyfill

Then make you you import 'babel-polyfill' in your entry file (ie index.js)

Add react-redux, redux-saga and redux-form as dependencies

npm install react-redux npm install redux-saga npm install redux-form

Also recommended, redux-logger:

npm install redux-logger

Create or update a redux-store that injects the reducers and sagas provided by @openmrs/react-components

They should be injected under the "openmrs" namespace.

See example store at samples/redux-store.js

For an example of how to inject a Redux store, see samples/App.jsx

For a documentation of how to use the components check out the readme for components


UI components within the library generally use Bootstrap styles. However the bootstrap css files are not included in the released bundle. Library consumers must provide the Bootstrap styles (or their own alternatives) within there own app.

For information on including the stylesheet, see:

Note that you may also need to include react-bootstrap and react-dom as dependencies in the app that uses react components (TODO: confirm this?)

If you are using the create-react-app template, you can install and use the Bootstrap CSS by following the steps here:[README]().md#adding-bootstrap


To localization your OWA with the react-intl HOC

import { setLocaleMessages, withLocalisation } from '@openmrs/react-components';

// Your local english translation file
import messagesEN from "./translations/en.json";

// Your local french or any other language translation file
import messagesFR from "./translations/fr.json";

  en: messagesEN,
  fr: messagesFR,

To localize a component wrap it with the localisation HOC import myComponent from 'pathToYourComponent/myComponent';

const LocalizedBreadCrumb = withLocalisation(myComponent);

Publishing a new version

npm run pack npm publish --access public

Other tips

To get around CORS issues when developing:

You can’t perform that action at this time.