# @e-group/react-component-kit

> Use to extend react.semantic-ui and with some examples

Latest version **1.1.12** (published 2018-07-06) · MIT license · 0 weekly downloads

## Install

```sh
npm install @e-group/react-component-kit
pnpm add @e-group/react-component-kit
yarn add @e-group/react-component-kit
bun add @e-group/react-component-kit
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.12 |
| Published | 2018-07-06 |
| First published | 2018-06-07 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 5 |
| Unpacked size | 25.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | JerryP |
| Maintainers | egroupteam, jerry_p |

## Links

- npm: https://www.npmjs.com/package/@e-group/react-component-kit
- Repository: https://github.com/eGroupTeam/react-component-kit
- Homepage: https://github.com/eGroupTeam/react-component-kit#readme
- Issues: https://github.com/eGroupTeam/react-component-kit/issues
- npm.io page: https://npm.io/package/@e-group/react-component-kit

## Dependencies (5)

- [react](https://npm.io/package/react.md) ^16.2.0
- [lodash](https://npm.io/package/lodash.md) ^4.17.5
- [react-dom](https://npm.io/package/react-dom.md) ^16.2.0
- [prop-types](https://npm.io/package/prop-types.md) ^15.6.1
- [semantic-ui-react](https://npm.io/package/semantic-ui-react.md) ^0.80.0

## Recent versions

- 1.1.12 (latest) — 2018-07-06
- 1.1.11 — 2018-06-07

## README

# @e-group/react-component-kit

Use to extend react.semantic-ui and with some examples

## Usage

> yarn add @e-group/react-component-kit

import lib

```javascript
import { createNavbar } from '@e-group/react-component-kit'
```

basic content defined

```javascript
const TopMenu = props => (
  <Menu
    fixed="top"
    size="huge"
    style={{
      paddingLeft: props.leftMenuWidth,
    }}
  >
    <Menu.Item name="Basic TopMenu" />
  </Menu>
)

const RightMenu = props => (
  <Sidebar
    as={Menu}
    animation="overlay"
    direction="right"
    visible={props.visible}
    vertical
    inverted
  >
    <Menu.Item name="Basic RightMenu" onClick={props.onPusherClick} />
  </Sidebar>
)

const Content = props => (
  <div className={styles.dashboard} style={{
    marginLeft: props.leftMenuWidth
  }}>
    <Switch>
      <Route exact path="/difMenu" render={() => (<div>example page</div>)} />
      <Route path="/home" component={Home} />
    </Switch>
  </div>
)
```

create Navbar

```javascript
const Navbar = createNavbar(Content,TopMenu,RightMenu)

export default () => (
  <Navbar
    leftItems={[{
      key: 'left1',
      name: 'home',
      icon: 'home',
      link: false,
      as: NavLink,
      to: '/home',
      exact: true
    },
    {
      key: 'left2',
      name: 'difMenu',
      icon: 'folder open',
      link: false,
      as: NavLink,
      to: '/difMenu',
      exact: true
    }]}
    logo={<Image size="mini" src="/static/logo.png" centered />}
  />
)
```

## Example

> yarn

&&

> yarn example

---
_Source: https://npm.io/package/@e-group/react-component-kit · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._