Documentation RU

Добро пожаловать в документацию по библиотеке @hxh-core/react

Здесь вы найдете информацию о компонентах и хуках, входящих в состав библиотеки, а также руководства по их использованию.

hxh-core/react полностью поддерживает TypeScript.

Установка

Установите библиотеку с помощью npm

npm install @hxh-core/react

или с помощью yarn

yarn add @hxh-core/react

Использование

Помощники

setUrlBeforeImageName подставляет URL перед названием фото. Его также можно использовать с обычными строками.

setUrlBeforeImageName('image1.jpg', 'https://example.com/');
// Вернет https://example.com/image1.jpg
// OR
const images = ['image1.jpg', 'image2.jpg'];
setUrlBeforeImageName(images, 'https://example.com/');
// Вернет ['https://example.com/image1.jpg', 'https://example.com/image2.jpg']

getNeedStyle возвращает стили в виде styles.active

getNeedStyle({
	isActive: true, // или ваше условие
	styles: styles, // module styles
	needStyle: styles.active,
});
// Если не передан needStyle, то по умолчанию возвращает styles.active

closeModalOnPress используется для закрытия модальных окон при нажатии на кнопку на клавиатуре

import { getNeedStyle, closeModalOnPress } from '@hxh-core/react/dist/helpers';
import styles from './TestComponent.module.css';

export const TestComponent = () => {
	const [isOpenModal, setIsOpenModal] = useState(false);

	return (
		<div
			className={`${getNeedStyle({
				isActive: isOpenModal,
				styles,
				needStyle: styles.open,
			})}`}
			onKeyDown={(event) =>
				closeModalOnPress({
					event,
					key = 'Escape', // Default
					setIsOpen: setIsOpenModal,
					overflowClass: 'body-overflow', // Если вы добавляете к body класс, который добавляет overflow: hidden
				})
			}
		>
			{/* ...modal code */}
		</div>
	);
};

Вклад в проект

Если вы хотите внести свой вклад в проект, пожалуйста, ознакомьтесь с руководством по вкладу.

Контакты

ВК группа: HxH Marketing

Telegram разработчика: Kireev Dev