<Generic> Component

<Generic> is an unstyled generic element. It governs the semantics, classes, refs and more.

Installing <Generic> Component

There are 2 ways to install <Generic> component into your react app project:

  • Install the Specific Package of <Generic> Component
  • Install the Whole Reusable-UI Component Pack, including the <Generic> Component

Semantic Properties

Defines semantic meaning to the <Generic>, allowing screen readers and other tools to present and support interaction with the <Generic> in a way that is consistent with user expectations of that type of the <Generic>.

tag Property

Defines the final rendered tag of the <Generic>.

The possible values are:

  • empty string ('')
  • a valid HTML tag name

role Property

Defines the meaning of the <Generic>.

The possible values are:

  • empty string ('')
  • a valid ARIA role name

semanticTag Property

Defines a default semantic tag name(s) for the [tag], if its value is not specified.

If the [tag] is not specified, the system use [semanticTag] and [semanticRole] to determine the appropriate rendered tag.

semanticRole Property

Defines a default semantic tag name(s) for the [role], if its value is not specified.

If the [role] is not specified, the system use [semanticTag] and [semanticRole] to determine the appropriate rendered role='...'.

Global Properties

Defines general properties to the <Generic>.

elmRef Property

Gets the DOM element reference to the <Generic>.

If the <Generic> contains multiple DOM elements, you will get the most functioning element. For example: A custom textbox control contains some <div>s, <span>s, and an <input type='hidden'>. You will get the reference of <input type='hidden'> because it's the most functioning element, whereas the others are just for layouting purpose.

outerRef Property

Gets the most outer DOM element reference to the <Generic>.

If the <Generic> contains multiple DOM elements, you will get the most outer element. For example: A custom textbox control contains an <input type='hidden'> wrapped with a <div>. You will get the reference of <div> because it's the most outer element.

In a rare case, if there are multiple outer elements, the DOM element reference is decided by component's creator.

id Property

Defines an identifier (ID) which must be unique in the whole document. Its purpose is to identify the element when linking (using a fragment identifier), scripting, or styling (with CSS).

style Property

Defines a simple CSS styling declarations to be applied to the element.

For a complex CSS styling, it is recommended for styles to be defined in a separate file(s).

Class Properties

Defines some classes as grouping identifiers so that the CSS and JavaScript can select and access specific element via class selectors or special functions.

These class properties below are actually do the same thing. They will be merged at rendering phase. They are divided into special class names for grouping and code maintenance purpose.

mainClass Property

Defines the main class which is responsible for constructing the component layout.

For example: mainClass='coolButton'.

variantClasses Property

Defines an array of classes which are responsible for making alternative appearances of the <Generic> layout without changing the <Generic>'s functionality.

For example: variantClasses={['outlined', 'rounded', 'glassy']}.

To further minimize the excess re-render effect, make sure the passed array is a stable reference. You can wrap the array with useMemo() or declare the array at top level module.

stateClasses Property

Defines an array of classes which are responsible for changing the conditions of the <Generic> behavior or functionality.

For example: stateClasses={['toggledOn', 'activated', 'pressed']}.

To further minimize the excess re-render effect, make sure the passed array is a stable reference. You can wrap the array with useMemo() or declare the array at top level module.

classes Property

Defines an array of general purpose classes. If the classes don't seem suitable for [variantClasses] or [stateClasses], this is the most suitable property to place.

For example: classes={['boo', 'foo', 'awesome']}.

To further minimize the excess re-render effect, make sure the passed array is a stable reference. You can wrap the array with useMemo() or declare the array at top level module.

className Property

A traditional React class property. Defines the desired class(es) as single string with spaces as separators between the classes.

For example: className='awesomeButton highlighted dark-mode'.