@react-ag-components/core

Core

This is the core component for the Department's Component library.

It provides the following:

• Single base CSS and uikit css
• Base API client (includes global error handling)
• Automatic page loading spinner (if using Base APi client)
• PageWrapper for caching and message passing

Install

npm i @react-ag-components/core --save

Use in your project

Base CSS and Uikit

Include the base.css and uikit.css in your src/index.html file

import '@react-ag-components/core/lib/styles/uikit.css'
import '@react-ag-components/core/lib/styles/base.css'

Base API

Add this import to your project's arc/services/api/index.js

And use these instead of your local implementations.

import {get, post, put, del, formPost} from '@react-ag-components/core/lib/api'

If you are using the Messages component (> 0.0.3) then any REST errors will automatically be shown.

Loadable Section

If you need a Spinner on the page while a REST call is being made, wrap part of your page inside <LoadableSection>

import LoadableSection from '@react-ag-components/core/lib/LoadableSection'

...

<LoadableSection>

  Anything inside here will be replaced with a spinner while an API call is in progress

</LoadableSection>

Note: any API errors will also stop the spinner.

Page Wrapper

Use the PageWrapper to support caching and pass messages between pages.

import wrapPage from '@react-ag-components/core/lib/PageWrapper'
...

export default wrapPage()(Country)

To save an object to cache:

this.props.saveCache(yourObj)

To read the object from cache

let obj = this.props.cache.yourObj

To set a message for another page to show:

this.props.setMessage({success:'Success!'})

The message can be read and shown from a different page:

this.state = {
  success:props.success
}

Contributing

Get the repository

git clone https://github.com/alphillips/core.git

Update dependencies

npm install

Run the project

npm start

Deploy to npm

Build

npm run build -- --copy-files

Publish

npm publish --access public