@mjoellnier/dot-menu NPM

Dot-menu

This is a ReactJS plugin to create a Dot-menu for your pages. It is highly customizable and tries to expose as many options as possible.

It is still under construction (besides the fact that this is my very first npm plugin). So PRs and feedback are highly welcomed!

What is this all about?

This plugin creates the menu on the left side (optionally also on the right side). The pages content you create will be window filling (100vw width and 100vh heigth).

Installation

npm install @mjoellnier/dot-menu --save

Example Usage

import DotMenu, { DotMenuPage } from "@mjoellnier/dot-menu";
import React from "react";
import testImage from "./testImage.jpg";

const App = () => {
  return (
    <DotMenu>
      <DotMenuPage backgroundColor={"RANDOM"} title={"Page 1"}>
        Hello 1
      </DotMenuPage>
      <DotMenuPage backgroundColor={"RANDOM"} title={"Page 2"}>
        Hello 2
      </DotMenuPage>
      <DotMenuPage backgroundColor={"RANDOM"} title={"Page 3"}>
        Hello 3
      </DotMenuPage>
      <DotMenuPage backgroundImage={testImage} title={"Page 4"}>
        Hello 4
      </DotMenuPage>
    </DotMenu>
  );
};

export default App;

Properties

DotMenu properties

Name	Values	Default	Description
dotFilling	string	darkgray	Determines the color of the nav dots filling. Give it a normal HEX/color string
dotBorder	string	gray	Determines the color of the nav dots border. Give it a normal HEX/color string
hideDots	true\|false	false	Determines if the nav dots are hidden
hidePath	true\|false	false	Determines if the progress path is hidden
pathColor	string	black	Determines the color of the propress path. Give it a normal HEX/color string
pathWidth	string	"2"	Determines the width of the progress path. Give it an integer wrapped as string
right	true\|false	false	Determines if the menu is rendered on the right or left
showMenuOnSmallScreens	true\|false	false	Determines if the menu is shown on small displays
windowScrolling	true\|false	false	Determines if the `DotMenuPage` elements are scrolled as a hole

DotMenuPage properties

Name	Values	Default	Description
backgroundColor	string \| "RANDOM"	none	The page background color. Give it a normal HEX/color string or the string `RANDOM` when you love surprises!
backgroundImage	string \| "RANDOM"	none	The background image for the page. It is rendered fullscreen and resizes with the window/screen size. Use `RANDOM` to get a surprise image from Unsplash. Check the code example above to see how to add a local image.
style	Object	none	A styling object that is handed through to the page element. With it you can override every styling item!
title	string	none	The title to be rendered in the mouse over box

Changelog

Version	Changes
1.0.0	Initial Release
1.0.1	Adding smooth scrolling to page on nav dot click
1.1.0	Adding `DotMenuPage` element scrolling and more properties
1.2.0	Adding background image and styling feature to pages
1.2.1	Code cleaning and smaller fixes
1.3.0	Dot Menu is hidden on small screens (can be shown via property)