FHF-REACT

Introduction

This framework provides a collection of reusable components and styles to help you build responsive and flexible web layouts effortlessly.

Components

$3

A utility component for clearing floats and ensuring proper layout.

``

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 /}

		

	);

};



export default Comp;

``

Feel free to explore and use these components and styles to create modern and responsive user interfaces in your React projects.

Happy coding!