# @colpi/react-fullscreen-menu

> Simple Fullscreen Menu in React with Css Transition and Styled Component

Latest version **1.1.8** (published 2020-09-08) · (MIT) license · 0 weekly downloads

## Install

```sh
npm install @colpi/react-fullscreen-menu
pnpm add @colpi/react-fullscreen-menu
yarn add @colpi/react-fullscreen-menu
bun add @colpi/react-fullscreen-menu
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.8 |
| Published | 2020-09-08 |
| First published | 2020-09-03 |
| Weekly downloads | 0 |
| License | (MIT) |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Node | >=10 |
| Dependencies | 0 |
| Unpacked size | 71.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 4 |
| Author | Pietro Colangelo |
| Maintainers | colpi |
| Keywords | react, fullscreen-menu, react-fullscreen-menu, styled-components, css-transition |

## Links

- npm: https://www.npmjs.com/package/@colpi/react-fullscreen-menu
- Repository: https://github.com/piero80/react-fullscreen-menu
- Homepage: https://github.com/piero80/react-fullscreen-menu#readme
- Issues: https://github.com/piero80/react-fullscreen-menu/issues
- npm.io page: https://npm.io/package/@colpi/react-fullscreen-menu

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.1.8 (latest) — 2020-09-08
- 1.1.7 — 2020-09-08
- 1.1.6 — 2020-09-08
- 1.1.5 — 2020-09-08
- 1.1.4 — 2020-09-08
- 1.1.3 — 2020-09-08
- 1.0.9 — 2020-09-04
- 1.0.8 — 2020-09-04
- 1.0.7 — 2020-09-04
- 1.0.6 — 2020-09-03
- 1.0.5 — 2020-09-03
- 1.0.4 — 2020-09-03
- 1.0.3 — 2020-09-03

## README

This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).

# react-fullscreen-menu

> Simple Fullscreen Menu in React with Css Transition

[![NPM](https://img.shields.io/npm/v/@colpi/react-fullscreen-menu.svg)](https://www.npmjs.com/package/@colpi/react-fullscreen-menu) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Demo & examples

Live demo: [react-fullscreen-menu](https://codesandbox.io/s/react-fullscreen-menu-weil3)

![alt text](https://github.com/piero80/react-fullscreen-menu/blob/master/example/public/screen.png?raw=true)

## Install

Including react-fullscreen-menu in your page. If you use this, make sure you have already included React, and it is available as a global variable.

```bash
npm install --save styled-components
npm install --save @colpi/react-fullscreen-menu
```

## Usage

```jsx
import React, { Component } from 'react'
import { FullscreenMenu } from '@colpi/react-fullscreen-menu'

function Example {

  export const dataMenu = [
  {
    label: 'Chi siamo',
    url: 'chi-siamo',
    sub_title: null,
    sub_menu: null
  },
  {
    label: 'Soluzioni',
    url: '#',
    sub_title: null,
    sub_menu: [
      {
        label: 'Video',
        sub_title: 'Gestisci i tuoi video',
        url: '/soluzioni/video',
        sub_menu: null
      },
      {
        label: 'Immagini',
        sub_title: 'Gestisci le tue immagini',
        url: '/soluzioni/immagini',
        sub_menu: null
      },
      {
        label: 'Gallerie',
        sub_title: 'Gestisci le tue gallerie',
        url: '/soluzioni/gallerie',
        sub_menu: null
      },
      {
        label: 'Siti-web',
        sub_title: 'Crea i tuoi siti web',
        url: '/soluzioni/gallerie',
        sub_menu: null
      },
      {
        label: 'Applicazioni',
        sub_title: 'Applicazioni',
        url: '/soluzioni/applicazioni',
        sub: null
      }
    ]
  },
  {
    label: 'Servizi',
    url: '#',
    sub_title: null,
    sub_menu: [
      {
        label: 'Comunicazione',
        sub_title: 'Lorem ipsum dolor sit amet dor',
        url: '/servizi/comunicazione',
        sub_menu: null
      },
      {
        label: 'Fruizione',
        sub_title: 'Lorem ipsum dolor sit amet dor',
        url: '/servizi/fruizione',
        sub_menu: null
      },
      {
        label: 'Formazione e consulenza',
        sub_title: 'Lorem ipsum dolor sit amet dor',
        url: '/servizi/formazione-e-consulenza',
        sub_menu: null
      }
    ]
  },
  {
    label: 'I nostri clienti',
    url: '#',
    sub_title: null,
    sub_menu: null
  },
  {
    label: 'Lavora con noi',
    url: 'lavora-con-noi',
    sub_title: null,
    sub_menu: null
  },
  {
    label: 'Contatti',
    url: 'contatti',
    sub_title: null,
    sub_menu: null
  }
]

  render() {
    return <FullscreenMenu data={dataMenu} position="left" colorIcon="black"/>
  }
}
```

## Props

**data: Array** (required) <br />
**position: string** (required) <br />
**colorIcon: string** (required)

## License

(MIT) © [piero80/react-fullscreen-menu](https://github.com/piero80/react-fullscreen-menu)

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