README

`@gorazdo/tomui`

Installation

npm i @gorazdo/tomui --save

Note the library has several peerDependencies and it requires you to install them:

npm i --save @material-ui/core clsx`

Note about clsx library A tiny (228B) utility for constructing className strings conditionally. Also serves as a faster & smaller drop-in replacement for the classnames module.

Usage

A library is build using Named Exports convention.

Read this article to get the difference.

import { AspectRatio, useRatio } from '@gorazdo/tomui';

const YourComponent = () => {
  return <AspectRatio variant="golden" />
}

Another convention is you can always import Typescript Types for every component:

import type { AspectRatioProps } from '@gorazdo/tomui';

// Note: you can always add "Props" to a component name and get its Typescript definitions

Atomic design

The library is built keeping atomic design in mind.

Libary has a following folder structure:

@gorazdo/tomui

-- atoms
---- AtomicComponentName
---- AspectRatio

-- molecules
---- ComposedComponentName
---- StickyFooterLayout
---- ...

-- organisms

-- themes

But you don't need to follow these routes, just use import import { Component } from "@gorazdo/tomui".

CommonJS (CJS) into ES Module (MJS)

The library is prepared in both ways. You may find CommonJS files directly in /dist directory and ES Modules inside /dist/mjs subfolder.

Usage no npm install needed!