this react framework has React components and styles designed to facilitate the creation of responsive and flexible web layouts. Tailored for ease of use and versatility, the framework includes components for containers, flexible layouts, responsive imag
npm install fhf-react
jsx
`
$3
A flexible container component with optional styles and class names.
`jsx
{/ Your content goes here /}
`
$3
A flexible container for creating flex layouts.
`jsx
{/ Flex items go here /}
`
$3
A flexible container for creating flex layouts.
`jsx
{/ Your content goes here /}
`
$3
A responsive div component with visibility and hidden classes based on different screen sizes.
`jsx
{/ Your content goes here /}
`
$3
A responsive image component that scales with the width of its container.
`jsx
`
$3
A responsive video component similar to RespImg.
`jsx
`
$3
A responsive grid component with a specified column size and optional gap between items.
`jsx
{/ Grid items go here /}
`
$3
Similar to RespGridFill, but with auto-fitting columns.
`jsx
{/ Grid items go here /}
`
$3
An unordered list component with no list styles.
`jsx
{/ List items go here /}
`
$3
A styled ul component for navigation items.
`jsx
{/ Navigation items go here /}
`
$3
A responsive heading component with different font sizes based on the heading level.
`jsx
{/ Your heading text goes here /}
`
$3
A circular container component.
`jsx
{/ Your content goes here /}
`
$3
A responsive background image component for specified HTML elements.
`jsx
{/ Your content goes here /}
`
$3
A responsive background image component for specified HTML elements.
`jsx
import {
styles,
mergeStyles,
styleHover,
styleActive,
mergeRefs,
} from "fhf-react";
const Comp = () => {
const { refLightHover, styleLightHover } = styles.bgLightHover();
const { refOfActive, styleOfActive } = styleActive(
styles.extremeRounded,
styles.bg("green")
);
return (
ref={mergeRefs(refLightHover, refOfActive)}
style={mergeStyles(
styles.centerPosition,
styles.fitContentHW,
styleLightHover,
styleOfActive
)}>
{/ Your centered content goes here /}