@thejones/react-common-components/README.md

React component - semantic ui

# WIP/Testing - Do not use

## @thejones/react-common-components
Testing how to create a React component library that optionally wraps other components when needed. In this case [semantic-ui-react](https://react.semantic-ui.com/)


### Supports

ES modules, UMD, Common JS as it was bootstrapped with the awesome [nwb](https://github.com/insin/nwb) project.



### Why
Single import into larger application.
The main application would not need to be aware of changes when the underlying lib changes.
Example - team switches from bootstrap to MDC and then to Semantic. ¯\\_(ツ)_/¯

### Concerns
No work has been done on reducing bundle size.

### Example Usage

```
import React, { Component } from 'react'
import { render } from 'react-dom'

import { Button, Modal } from '@thejones/react-common-components'
import { Label, Icon } from 'semantic-ui-react' // external components (your lib/other)

class Demo extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return <div>
      <h1>react-loading-button Demo</h1>

      <h2>Static</h2>
      <Button as='div' labelPosition='left'>
        <Label as='a' basic pointing='right'>
          2,048
      </Label>
        <Button icon>
          <Icon name='heart' />
          Like
        </Button>
      </Button>

      <Button as='div' labelPosition='left'>
        <Label as='a' basic pointing='right'>
          2,048
        </Label>
        <Button icon>
          <Icon name='heart' />
          Like
        </Button>
      </Button>


      <Modal
        trigger={<Button>Show Modal</Button>}
        header='Reminder!'
        content='Call Benjamin regarding the reports.'
        actions={['Snooze', { key: 'done', content: 'Done', positive: true }]}
      />

    </div>
  }
}

render(<Demo />, document.querySelector('#demo'))
```