2.1.0 • Published 4 months ago

fhf-react v2.1.0

Weekly downloads
-
License
MIT
Repository
github
Last release
4 months ago

Introduction

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

Components

ClearFix

A utility component for clearing floats and ensuring proper layout.

<ClearFix />

Container

A flexible container component with optional styles and class names.

<Container>{/* Your content goes here */}</Container>

FlexContainer

A flexible container for creating flex layouts.

<FlexContainer>{/* Flex items go here */}</FlexContainer>

FlexItem

A flexible container for creating flex layouts.

<FlexItem>{/* Your content goes here */}</FlexItem>

DivV

A responsive div component with visibility and hidden classes based on different screen sizes.

<DivV visibleIn="md" hiddenIn="lg">
	{/* Your content goes here */}
</DivV>

RespImg

A responsive image component that scales with the width of its container.

<RespImg src="your-image-url" alt="Image Alt Text" />

RespVideo

A responsive video component similar to RespImg.

<RespVideo src="your-video-url" />

RespGridFill

A responsive grid component with a specified column size and optional gap between items.

<RespGridFill size={100} gap={20}>
	{/* Grid items go here */}
</RespGridFill>

RespGridFit

Similar to RespGridFill, but with auto-fitting columns.

<RespGridFit size={100} gap={20}>
	{/* Grid items go here */}
</RespGridFit>

UnstyledList

An unordered list component with no list styles.

<UnstyledList>{/* List items go here */}</UnstyledList>

NavUl

A styled ul component for navigation items.

<NavUl>{/* Navigation items go here */}</NavUl>

RespHeading

A responsive heading component with different font sizes based on the heading level.

<RespHeading element="h2">{/* Your heading text goes here */}</RespHeading>

Circle

A circular container component.

<Circle>{/* Your content goes here */}</Circle>

ResBackgImg

A responsive background image component for specified HTML elements.

<RespBackgImg element="div" url="path/*">
	{/* Your content goes here */}
</RespBackgImg>

Styles

A responsive background image component for specified HTML elements.

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 (
		<div
			ref={mergeRefs(refLightHover, refOfActive)}
			style={mergeStyles(
				styles.centerPosition,
				styles.fitContentHW,
				styleLightHover,
				styleOfActive
			)}>
			{/* Your centered content goes here */}
		</div>
	);
};

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!

2.1.0

4 months ago

2.0.3

10 months ago

2.0.2

10 months ago

2.0.5

10 months ago

2.0.4

10 months ago

2.0.1

10 months ago

2.0.0

11 months ago

1.8.9

1 year ago

1.8.8

1 year ago

1.8.7

1 year ago

1.8.6

1 year ago

1.8.5

1 year ago

1.8.4

1 year ago

1.8.2

1 year ago

1.8.1

1 year ago

1.8.0

1 year ago

1.8.3

1 year ago

1.7.5

1 year ago

1.7.3

1 year ago

1.7.4

1 year ago

1.7.2

1 year ago

1.7.1

1 year ago

1.7.0

1 year ago

1.6.4

1 year ago

1.6.3

1 year ago

1.6.2

1 year ago

1.6.1

1 year ago

1.6.0

1 year ago

1.6.9

1 year ago

1.6.8

1 year ago

1.6.6

1 year ago

1.6.5

1 year ago

1.5.5

1 year ago

1.5.4

1 year ago

1.5.6

1 year ago

1.5.3

2 years ago

1.5.1

2 years ago

1.5.0

2 years ago

1.4.10

2 years ago

1.4.6

2 years ago

1.4.5

2 years ago

1.4.9

2 years ago

1.4.8

2 years ago

1.4.7

2 years ago

1.4.3

2 years ago

1.4.2

2 years ago

1.4.1

2 years ago

1.4.0

2 years ago

1.3.2

2 years ago

1.3.1

2 years ago

1.3.0

2 years ago

1.2.2

2 years ago

1.2.1

2 years ago

1.2.0

2 years ago

1.1.1

2 years ago

1.1.0

2 years ago

1.0.5

2 years ago

1.0.4

2 years ago

1.0.3

2 years ago

1.0.2

2 years ago

1.0.1

2 years ago

1.0.0

2 years ago