Montorfano-utils NPM

montorfano-utils

Check the documentation below about this package.

Changelogs
Quick start
User interface
Data manipulation
Custom features

Changelogs

2.0.7

Fixed a display issue from a bad flex configuration in the menu mode of the Bar component.
Fixed an issue with the menu mode of the Bar component, the menu now hides when the link is clicked.

2.0.7 Known issues

The Appearcomponent doesn't animate from the provided direction on the bar in menu mode.

2.0.5

Redesigned Bar component by replacing the background by a blurred background, changed the UI of the Menu mode
Redesigned Notification component by replacing the background by a blurred background
Fixed issues where the user-agent was adding paddings and margins to text fields, now there are no user-agent interactions with the texts components. Check your code to replace the superfluous code if you prevented text components to have margins and paddings.
Removed the ShareSVG component from the Footer because of an issue in changing the color of the svg dynamically, the component is removed until an efficient way to change the fill color is found.
Added animations to the Appear component, now the apparition can be done from an initial position. Check the documentation of the Appear component.

2.0.3

Fixed issues with the Link component and react-router-dom 6
Updated react-router-dom to last version, you may experience issues

2.0.2

Improved Progressive component
Changed sizing for elements by adding tiniest sizes, sizes were oversized before
Updated node-sass to last version, you may experience issues

2.0.1

Fixed Progressive component

2.0.0

Updated compiler options from es5 to es2015, take care when upgrading
Added Progressive component

1.4.3

Changed notification width sizing behavior

1.4.2

Fixing issues with Notification component importation
Fixing issues with too tiny font sizes

1.4.1

Changed tag structure of title, subtitle and text components to prevent bots to not recognize website title structure
Removed CamembertGraphic component
Added Notification component
Removed every shadow from built-in components to get a more minimalistic design using borders

1.4.0

Changed the font sizes
Added color effects to ham icon of menu bar
Finished menu bar design
Added color generation utils
Added a beta component (CamembertGraphic), check the informations about it below

Older versions

Added Parallax component, deprecate the VerticalScrollParallaxFollowing component
Added the ConvertCSSUnit function
Added the MontorfanoUtilsProvider component context provider

Quick start

To quickly start using montorfano-utils use npm:

npm install montorfano-utils

or yarn:

yarn add montorfano-utils

User interface

This package provides React Components to build interfaces with React.

You can find components to put text or titles, do parallax scrolling animation, etc... A lot of components use as props HTMLDivElement but there a some with Custom Types Definitions.

There is the list of the components :

Themed
The Themed component is used to define the theme of the website relative to the device theme (when it's available). Using this component will allows the style to change relative to the theme.
The Themed component is provided when you use MontorfanoUtilsProvider to wrap your app, if you already use MontorfanoUtilsProvider, don't worry about Themed. Some components may not work as expected if you don't use the Themed component to wrap your application.

Themed only takes children: any as props.

Appear
The Appear component is used to make reveal animations when the children is on the viewport.

Appear takes {children: any; delay?: number} as props. delay?: number prop optionnally takes a value in seconds. It's used to delay the appear when the component enter the viewport. default-value: 0

AspectRatio
The AspectRatio component does the same thing as the aspect-ratio attribute in CSS but because this attribute is not fully supported on all navigators, I used Javascript to use it.

AspectRatio takes {ratio: number; x?: string | number; y?: string | number; style?: CSSProperties; className?: string; motionProps?: MotionProps; children?: any;} as props. It uses the compressUnit function and the computeRatio functions from the aspect-ratio.ts file in the scripts folder.

ratio: number is the ratio that you want to size, it can be 16/9 or 3/2 x?: string|number; y?: string|number; are the sizes of the element. You should define only one size to let the second be computed by the computeRatio function. Those values can be with unit because the component uses compressUnit function to compute sizes in string. Check the documentation about compressUnit function which is present below. Others props are explicit.

Box
The Box component does the same things as a div tag but it uses framer-motion so it uses motion.div props.
Button
The Button component displays a button and takes as props HTMLAttributes<HTMLDivElement>. But it have special classes uses, using the class disabled or process modify the style and the behavior of the Button.
Bar
The Bar component displays a top bar on your app and takes as props {link: (LinkParams & { children: any })[];logo?: JSX.Element;.

link: (LinkParams & { children: any }) is used to show the links on the bar, the complete type definition is {to: string; method?: 1|2; children: any}. To understand more about to and method, go to the Link component documentation. The children prop is used to show the element which indicates that there is a link here. logo?: JSX.Element is used optionnally if you want to put a logo or a name on your bar.

Container
The Container component does the same things as a Box component but consider it as a parent Box
Footer
The Footer compoent is a footer for you website, it can contains links listed by categories and your own copyright declaration.

Footer takes {copyright: string; linkLists: { name: string; entries: { name: string; path: string }[] }[]} as props. copyright: string prop is where you put your own copyright declaration. linkLists: { name: string; entries: { name: string; path: string }[] }[] prop is complex, let's decompose it :

the type: {  name: string;  entries: {  name: string;  path: string  }[]  }[]

the main array type { name: string: entries: Object[]}[]
-> the name prop is the name of the category.
-> entries are links in the category.

the entries type { name: string; path: string }[]
-> the name prop is the name of the link.
-> the path is the href of the link.

Grid
The Grid component is used to build grids.

Grid takes {rows?: number; columns?: number} as props. The props are explicit.

Handwrite
The Handwrite component returns text with an handwrite font.

It takes as props HTMLAttributes<HTMLDivElement>. The props are explicit.

Input
The Input component renders an input element.

Input takes as props HTMLAttributes<HTMLInputElement>. The props are explicit.

TextArea
The Input component renders an input element.

Input takes as props HTMLAttributes<HTMLInputElement>. The props are explicit.

Layer
The Layer component sets layers using css z-index property.

It takes as props CustomLayerType which is extended by LayerParams, HTMLAttributes<HTMLDivElement>. LayerParams handle types {layer: number}. layer: number defines the z-index layer of the component and his childs.

Link
The Link component make redirection and replace the a tag or the NavLink component from react-router-dom. It uses react-router-dom and the navigate function from the navigate.ts file in the scripts folder.

It takes as props CustomLinkType which is extended by LinkParams, HTMLAttributes<HTMLDivElement>. LinkPrams handle types {to: string; method?: 1 | 2}. to: string defines the path to redirect on click. method?: 1 | 2 is the method of redirect. default-value: 2.

There is 2 redirect methods provided by the Link component. The first (1) redirect method make an in DOM navigation using useHistory and the second (2) redirect method make an outside DOM navigation using navigate.

until V1.2.1 there was a mistake in the definition of the redirect methods, verify your code because you may use the 2nd redirect method thinking that it redirects in the DOM

Loader
The Loader component is showed until the window.onload event is fired.

Loader takes as props {children: any}. The props are explicit.

Image
The Image component shows an image.

Image takes as props {source: string; style?: CSSProperties, ref?: MutableRefObject?: any}. source: string is the path of your image. Other props are explicit.

Move
The Move component make childrens moves relative to props.

Move takes as props {x?: string | number; y?: string | number; delay?: number; children: any} x?: string | number; y? string | number gives how much to move. delay?: number gives the delay to handle the action.

MontorfanoUtilsProvider
The MontorfanoUtilsProvider component is needed to make some montorfano-utils components work. If it's not used and if it doesn't wrap the whole montorfano components, you may see errors.

In MontorfanoUtilsProvider, the provider for parallax animations is defined and the Themed wrapper is defined.

Progressive
The Progressive component gives scroll progress to a component. The children of a Progressive component should have a progress prop
VerticalScrollParallaxFollowing
VerticalScrollParallaxFollowing is deprecated, you should use Parallax The VerticalScrollParallaxFollowing component make a parallax moving.

VerticalScrollParallaxFollowing takes as props {children: any} The props are explicit.

Parallax
The Parallax component make a parallax moving.

Parallax takes as props {children: any, x?: [number | string, number | string], y?: [number | string, number | string]} x?: [string | number, string | number] is used to provide the distance you want to move on the horizontal axis, first entry is from the other is to. y?: [string | number, string | number] is used to provide the distance you want to move on the vertical axis, first entry is from the other is to. The other props are explicit.

Fixed, Absolute, Relative, Static, Sticky
The use of these components are explicit. They are used to set position of childrens and all take {children: any} as props.
Separe
The Separe component make a separation like a br tag.

Separe doesn't take props.

Subtitle
The Subtitle component renders a subtitle;

Subtitle takes as props HTMLAttributes<HTMLDivElement>. The props are explicit.

Text
The Text component renders a text.

Text takes as props HTMLAttributes<HTMLDivElement>. The props are explicit.

Title
The Title component renders a text.

Title takes as props HTMLAttributes<HTMLDivElement>. The props are explicit.

ShareIt
The ShareIt component push new share data to the share button.

ShareIt component handle ShareSettingsTypes as props. ShareSettingsTypes have 2 special definitions. title: string, the share title. url: string, the url to share.

GetShareSettings
GetShareSettings function returns the current share settings. It handles no params.

Data manipulation

This package provides data manipulation functions to manipulate data quickly and efficiently.

EditJSONEntries
This function edit a JSON element and returns it. To edit it, you need to provide the edit list.

Syntax:

EditJSONEntries(entries: [string, any][], element: { [key: string]: any })

The entries param is an array of edits. An edit is typed [string, any], the first entry is the property name, the second is the new value. The element param is the JSON element to edit.

JSONToArray
This function takes a JSON Element and returns it as an array.

Syntax:

JSONToArray(jsonElement: { [key: string]: any })

The jsonElement param is the JSON element to return as an array.

VerifyEntry(entry: string).byLength(length: number)
This function returns a boolean if the entry.length is too high compared to the length given on the length prop.
VerifyEntry(entry: string).byRegex(regex: string)
This function returns a boolean, it's true if the function finds an element on the regex in the entry.
VerifyEntry(entry: string).get()
This function returns the entry.
AvoidEmpty
This function returns a value passed in params if the other value passed in params is empty.

Syntax:

AvoidEmpty(value: any, onEmpty: any)

value is the value that is checked for being empty or not. onEmpty is the value returned if value is empty.

ConvertCSSUnit
This function takes as argument a css size definition like "xunit" and a target size like "unit" and convert it to throw the amount of "unit" in "xunit".

Syntax:

ConvertCSSUnit(toConvert: string, convertUnitTo: "vw" | "vh" | "px" | "cm" | "in");

toConvert is the css size definition, examples: 100vw, 34in, 201px. convertUnitTo is the target unit.

The Parallax component use the ConvertCSSUnit function, if you see an error from the ConvertCSSUnit that you don't recognize you shouldn't take care of it, it's because you have passed a dimension to the Parallax component which is not supported by the ConvertCSSUnit function.

Misc features

This package provides misc features. There is a list below:

Color utils
Color utils are used in some components of my package but you can use it for everything you need to do.

I'm working on a complete documentation about color utils, the associated documentation of each function should be enough right now to let you work with it. There is the color utils functions:

generateRGBAColorArray
type RGBAColorArray
stringifyRGBAColorArray
transformRGBAColorArray

Thanks for reading my documentation !

The following websites are using this package to run:

Send me an e-mail at me@johanmontorfano.com if you want your website to be on this list or if you have some question or misunderstanting about the documentation!