https://github.com/subzane/flymenu-reactjs

An off-canvas menu system for responsive websites
https://github.com/subzane/flymenu-reactjs

javascript navigation off-canvas-menu off-canvas-navigation plugin react reactjs styled-components typescript

Last synced: about 1 month ago
JSON representation

An off-canvas menu system for responsive websites

• Host: GitHub
• URL: https://github.com/subzane/flymenu-reactjs
• Owner: SubZane
• License: mit
• Created: 2020-04-03T14:27:31.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-31T09:08:24.000Z (almost 2 years ago)
• Last Synced: 2024-11-27T16:02:15.609Z (about 2 months ago)
• Topics: javascript, navigation, off-canvas-menu, off-canvas-navigation, plugin, react, reactjs, styled-components, typescript
• Language: TypeScript
• Homepage: https://subzane.github.io/flymenu-reactjs/
• Size: 982 KB
• Stars: 2
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        


  





	

	

	

	

	





	

	

	



## Description

flymenu-reactjs is an off-canvas menu component written in ReactJS with TypeScript and Styled Components.

## Demo

A demo can be found here: Demo

## Installation

```

yarn add flymenu-reactjs

# or via npm

npm install flymenu-reactjs --save

```

## Theme Options

There is a small theme settings file located in `/src/helpers/theme.tsx` where you can change colors and such.

### Properties

`` component

- `showButton = true`: If the default menu button should be used

- `state = ''`: If the menu should be visible or not. Only used when not using the default menu button `'open' | 'close' | ''`

- `animation = 'door-left'`: Animation effect of the menu. You can choose between `'door-left' | 'door-right' | 'flip-bottom' | 'flip-top'`

`` component

- `menuDataSource`: Menudata object used to render the menu

- `backButtonText = 'Go back'`: Text on the back-button

## Local development and usage

Install dependencies and start the development server

```

yarn install

yarn start

```

Open [`localhost:3000`](http://localhost:3000) in your browser.

## Requirements

Requires Node 10+ to run