Div Component

The <Div> component is a highly versatile container element that provides enhanced styling capabilities and supports various layout options. It's designed to be as close to a standard HTML div element as possible, but with additional features and simplified syntax.

Basic Usage

All of the React.CSSProperties are valid prop with the benefit of passing just the number without unit (px are used by default). The library extents the CSS properties and adds all of them with Hover suffix that will take affect only when the component is hovered by the device pointer.

Basic

import { Div } from "react-better-html";

function App() {
   return (
      <Div backgroundColor="#f8f8f8" padding={20}>
         This is a Div component.
      </Div>
   );
}

With Hover

import { Div } from "react-better-html";

function App() {
   return (
      <Div backgroundColor="#f8f8f8" padding={20} colorHover="#ff0000">
         This is a Div component.
      </Div>
   );
}

When hovering the component the text inside will change to red.

Common Props

All standard <div> attributes are valid props for this component.

import { Div } from "react-better-html";

function App() {
   return (
      <Div
         title="A Div component"
         onClick={(event) => {
            console.log(event.clientX);
         }}
      >
         This is a Div component.
      </Div>
   );
}

Value click

The library provides a new click event called onClickWithValue that is of type (value: Value) => void and is used together with the value prop. The Value type is generic and will automatically inherit the value prop type.

import { Div } from "react-better-html";

function App() {
   return (
      <Div
         value={12}
         onClickWithValue={(value) => {
            console.log(value); // Will log to the console "12"
         }}
      >
         This is a Div component.
      </Div>
   );
}

note

Keep in mind that onClick and onClickWithValue will both fire if passed.

Tab Accessed

If isTabAccessed prop is passed the component will be included in the keyboard Tab key list and will register clicks when Enter key is pressed.

import { Div } from "react-better-html";

function App() {
   return (
      <Div
         isTabAccessed
         onClick={(event) => {
            console.log(event.clientX);
         }}
      >
         This is a Div component.
      </Div>
   );
}

Semantic DOM

By default the <Div> component renders (you guessed it) a <div> element in the DOM. To keep the semantic HTML you can pass an as props with the name of the tag you want to render

import { Div } from "react-better-html";

function App() {
   return (
      <Div
         as="main"
         paddingInline={20}
      >
         This is a Div component.
      </Div>
   );
}

In the above example the component will be rendered as <main> component in the DOM

Subcomponents

A number of components in the library have a subcomponent feature witch is like a preset of the same component that is frequently used.

Div.row

This component is by default display: flex with flex-direction: row.

import { Div } from "react-better-html";

function App() {
   return (
      <Div.row alignItems="center">
         <Div>Child 1</Div>
         <Div>Child 2</Div>
         <Div>Child 3</Div>
      </Div.row>
   );
}

Div.column

This component is by default display: flex with flex-direction: column.

import { Div } from "react-better-html";

function App() {
   return (
      <Div.column alignItems="center">
         <Div>Child 1</Div>
         <Div>Child 2</Div>
         <Div>Child 3</Div>
      </Div.column>
   );
}

tip

Both Div.row and Div.column have a prop called invertFlexDirection that is of type boolean. When passed it inverts the flex direction. It is mostly used for creating a responsive design. Best used with useMediaQuery hook.

Div.grid

This component is by default display: grid and can accept grid-specific props.

import { Div } from "react-better-html";

function App() {
   return (
      <Div.grid gridTemplateColumn="1fr 1fr">
         <Div>Child 1</Div>
         <Div>Child 2</Div>
         <Div>Child 3</Div>
         <Div>Child 4</Div>
      </Div.grid>
   );
}

Div.box

This component renders a content box with predefined styles

import { Div } from "react-better-html";

function App() {
   return (
      <Div.box>This is a Div component.</Div.box>
   );
}

That renders to:

This is a Div component.