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) |

Todo

• Write tests!
• Improve performance for scrolling!
• ~~Hide menu dots (smoothly) on mobile~~
• ~~Implement scrolling when pressing on a nav dot~~
• Experiment with mobile
• Publish example project