@arcane-digital/maxliving-loading-indicator v0.1.1

MaxLiving "The Five Essentials" Loading Indicator

A React component for indicating a loading status using ML's "The Five Essentials" branded icons.

Installation and Usage

Install the package and peer dependencies.

npm install react react-dom @arcane-digital/maxliving-loading-indicator

Bring in the component wherever you need it.

import React, { Component } from 'react';
import { render } from 'react-dom';
import LoadingIndicator from '@arcane-digital/maxliving-loading-indicator';

class MyComponentThatHasToLoadStuff extends Component {
  state = { loading: true }
  
  componentDidMount() {
    setTimeout(() => this.setState({ loading: false }), 4000);
  }
  
  render() {
  	if (this.state.loading) return <LoadingIndicator />;

	return (
	  <div>This content took some time to load.</div>
	);
  }
}

render(
	<MyComponentThatHasToLoadStuff />,
	document.body
);

Contributing

How do I get set up?

Clone the repository, use the right Node version (via NVM), install dependencies.

git clone git@bitbucket.org:arcanedigital/loading-indicator.git && cd loading-indicator
nvm use
npm install

How do I develop?

We're using Storybook to develop the component.

Start up Storybook:

npm start

Then open your browser to http://localhost:9000

How do I run tests?

npm test