# dplibrariesreact

> Creando Components para react con @emotion/styled

Latest version **0.1.5** (published 2020-07-14) · 0 weekly downloads

## Install

```sh
npm install dplibrariesreact
pnpm add dplibrariesreact
yarn add dplibrariesreact
bun add dplibrariesreact
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.5 |
| Published | 2020-07-14 |
| First published | 2020-07-12 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 10 |
| Unpacked size | 64.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | elboqueronpaco |

## Links

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

## Dependencies (10)

- [react](https://npm.io/package/react.md) ^16.13.1
- [wouter](https://npm.io/package/wouter.md) ^2.4.0
- [react-dom](https://npm.io/package/react-dom.md) ^16.13.1
- [prop-types](https://npm.io/package/prop-types.md) ^15.7.2
- [@emotion/core](https://npm.io/package/@emotion/core.md) ^10.0.28
- [react-scripts](https://npm.io/package/react-scripts.md) 3.4.1
- [@emotion/styled](https://npm.io/package/@emotion/styled.md) ^10.0.27
- [@testing-library/react](https://npm.io/package/@testing-library/react.md) ^9.5.0
- [@testing-library/jest-dom](https://npm.io/package/@testing-library/jest-dom.md) ^4.2.4
- [@testing-library/user-event](https://npm.io/package/@testing-library/user-event.md) ^7.2.1

## Recent versions

- 0.1.5 (latest) — 2020-07-14
- 0.1.2-beta.0 (beta) — 2020-07-14
- 0.1.1 (alpha) — 2020-07-12
- 0.1.4 — 2020-07-14
- 0.1.3 — 2020-07-14
- 0.1.2 — 2020-07-14
- 0.1.0 — 2020-07-12

## README

# DPLibrariesReact

Es un Librerias para componentes de React

## instalación de la apilicación


```
    npm i dplibrariesreact
```

### Button's type

Puedes utilizar estos componentes como `button o Link(a)` solamente utilizando `href`.

``` js
    import React from 'react'
    import { 
    Button, 
    Container, 
    TitlePages, 
    PrimaryButton, 
    SecundaryButton, 
    DangerButton, 
    WarningButton, 
    InfoButton, 
    LightButton, 
    DarkButton } from 'dplibrariesreact'
    export default function ButtonPage() {
    return (
        <Main>
            <Button type='button'>Botón Por defecto</Button>
            <PrimaryButton type='button'>Botón Primario</PrimaryButton>
            <SecundaryButton type='button'>Botón Secundario</SecundaryButton>
            <DangerButton type='button'>Botón Peligro</DangerButton>
            <WarningButton type='button'>Botón Advertencia</WarningButton>
            <InfoButton type='button'>Botón Información</InfoButton>
            <LightButton type='button'>Botón Ligero</LightButton>
            <DarkButton type='button'>Botón Oscuro</DarkButton>
            <Button href='#'>Enlace Por defecto</Button>
            <PrimaryButton href='#'>Enlace Primario</PrimaryButton>
            <SecundaryButton href='#'>Enlace Secundario</SecundaryButton>
            <DangerButton href='#'>Enlace Peligro</DangerButton>
            <WarningButton href='#'>Enlace Advertencia</WarningButton>
            <InfoButton href='#'>Enlace Información</InfoButton>
            <LightButton href='#'>Enlace Ligero</LightButton>
            <DarkButton href='#'>Enlace Oscuro</DarkButton>
        </>
    )
}
```
### Headar

Utilizamos useState open para abrir panel de menu  hacer la animación de burger botón transformadolo en  ` X` ,

``` js
import React, { useState} from 'react'
import { Header, Logo, Burger, PanelMenu, Menu, ItemMenu, LinkMenu} from 'dplibrariesreact'

export default  HeaderLayout = () => {
    const [open, setOpen] = useState(false)
    return (
        <Header>
        <Logo><h1>logo</h1></Logo>
        <Burger open={open} setOpen={setOpen} />
        <PanelMenu open={open} setOpen={setOpen}>
          <Menu>
            <ItemMenu>
            <LinkMenu href='/' open={open} setOpen={setOpen}>Inicio</LinkMenu>
            <LinkMenu href='/buttons' open={open} setOpen={setOpen}>Botones</LinkMenu>
            </ItemMenu>
          </Menu>
        </PanelMenu>
      </Header>
    )
}

export default HeaderLayout
```

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