https://github.com/sgnh/react-pdca

PDCA status icon for React
https://github.com/sgnh/react-pdca

javascript pdca react

Last synced: about 1 month ago
JSON representation

PDCA status icon for React

• Host: GitHub
• URL: https://github.com/sgnh/react-pdca
• Owner: sgnh
• License: mit
• Created: 2017-05-24T21:35:26.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2017-07-23T23:12:37.000Z (over 7 years ago)
• Last Synced: 2024-09-24T08:36:02.990Z (3 months ago)
• Topics: javascript, pdca, react
• Language: JavaScript
• Homepage: https://www.npmjs.com/package/react-pdca
• Size: 131 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# react-pdca [![Build Status](https://circleci.com/gh/sgnh/react-pdca.svg?style=shield)](https://circleci.com/gh/sgnh/react-pdca/tree/master)

![PDCA](https://github.com/sgnh/react-pdca/raw/master/docs/pdca.png "PDCA")

## Installation

```

npm install --save react-pdca

```

## Demo

Working demo on CodePen: [React PDCA](https://codepen.io/sgnh/full/LyaaYK/)

## Example

```javascript

import React, { Component } from 'react';

import PDCA from 'react-pdca';

class PDCAContainer extends Component {

  constructor(props) {

    super(props);

    

    this.state = {

      planDisabled: false,

      doDisabled: false,

      checkDisabled: false,

      actDisabled: false,

    }

  }

  

  render() {

    return (

       this.setState({ planDisabled: false, doDisabled: true, checkDisabled: true, actDisabled: true })}

        onDoClick={() => this.setState({ planDisabled: false, doDisabled: false, checkDisabled: true, actDisabled: true })}

        onCheckClick={() => this.setState({ planDisabled: false, doDisabled: false, checkDisabled: false, actDisabled: true })}

        onActClick={() => this.setState({ planDisabled: false, doDisabled: false, checkDisabled: false, actDisabled: false })}

      />

    )

  }

}

export default PDCAContainer;

```