# topbar-apps

> ML Topbar Apps

Latest version **0.0.2** (published 2022-03-04) · MIT license · 0 weekly downloads

## Install

```sh
npm install topbar-apps
pnpm add topbar-apps
yarn add topbar-apps
bun add topbar-apps
```

## Health

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

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.2 |
| Published | 2022-03-04 |
| First published | 2022-03-04 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 363.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | vinicius.lopes |

## Links

- npm: https://www.npmjs.com/package/topbar-apps
- npm.io page: https://npm.io/package/topbar-apps

## Dependencies (1)

- [@stencil/core](https://npm.io/package/@stencil/core.md) ^2.7.0

## Recent versions

- 0.0.2 (latest) — 2022-03-04

## README

# Ml Topbar Apps

## Propriedades

## Properties

| Propriedades            | Atributos            | Descrição | Tipo      | Default     |
| ------------------- | -------------------- | ----------- | --------- | ----------- |
| `iconsColor`        | `icons-color`        |             | `string`  | `'#000'`    |
| `showApps`          | `show-apps`          |             | `boolean` | `true`      |
| `showNotifications` | `show-notifications` |             | `boolean` | `true`      |
| `showUser`          | `show-user`          |             | `boolean` | `true`      |
| `user`              | --                   |             | `IUser`   | `undefined` |


## Como usar esse componente

### React
- Instalar o pacote no seu projeto. Ex: `yarn add @ml/topbar-apps`
- Se o seu projeto foi criado utilizando o `create-react-app` você precisará executar a função `defineCustomElements()` no seu `index.js`. Caso a sua aplicação necessite ser executada no IE é necessário executar o `applyPolyfills()` também. Veja o exemplo abaixo.

```JSX
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

import { applyPolyfills, defineCustomElements } from '@ml/topbar-apps/loader';

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

applyPolyfills().then(() => {
  defineCustomElements();
});
```

- Para o correto funcionamento é necessário encapsular o componente dentro de um componente React como o exemplo abaixo:

```JSX
import React, { useRef, useEffect } from 'react'

const TopbarApps = ({ user, className, iconsColor, ...props }) => {
  const elementRef = useRef()

  useEffect(() => {
    elementRef.current.user = user
    elementRef.current.iconsColor = iconsColor
  }, [user, iconsColor])

  return <ml-topbar-apps class={className} ref={elementRef} {...props}></ml-topbar-apps>
}

export default TopbarApps

```

---
_Source: https://npm.io/package/topbar-apps · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._