# ghostkit/3.3.2/gutenberg/hooks/use-styles.js

Block Animations, Motion & Scroll Effects – Ghost Kit, version 3.3.2. 87 lines.

- Page: https://pluginprobe.com/plugins/ghostkit/3.3.2/code/gutenberg/hooks/use-styles.js
- Raw: https://pluginprobe.com/plugins/ghostkit/3.3.2/raw/gutenberg/hooks/use-styles.js
- Modified: 2024-02-18T18:40:24+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/ghostkit/3.3.2/code/gutenberg/hooks/use-styles.js#L10-L20`.

```javascript
import { cloneDeep } from 'lodash';

import * as styleUtils from '../utils/styles';

export default function useStyles(props) {
	const { attributes, setAttributes } = props;

	const ghostkitData = attributes?.ghostkit || {};
	const styles = ghostkitData?.styles || {};

	function getStyles() {
		return styleUtils.prepareStyles(styles);
	}

	/**
	 * Get style value by property name, selected device and optional selector.
	 *
	 * @param {string} name     - style property name.
	 * @param {string} device   - responsive device.
	 * @param {string} selector - optional custom selector.
	 *
	 * @return {any}
	 */
	function getStyle(name, device = false, selector = false) {
		return styleUtils.getStyle(styles, name, device, selector);
	}

	/**
	 * Check if style exists.
	 *
	 * @param {string} name     - style property name.
	 * @param {string} device   - responsive device.
	 * @param {string} selector - optional custom selector.
	 *
	 * @return {boolean}
	 */
	function hasStyle(name, device = false, selector = false) {
		return styleUtils.hasStyle(styles, name, device, selector);
	}

	/**
	 * Set new styles.
	 *
	 * @param {string} name      - style property name.
	 * @param          newStyles
	 * @param {string} device    - responsive device.
	 * @param {string} selector  - optional custom selector.
	 */
	function setStyles(newStyles, device = false, selector = false) {
		const clonedGhostkitData = cloneDeep(ghostkitData);

		if (typeof clonedGhostkitData?.styles === 'undefined') {
			clonedGhostkitData.styles = {};
		}

		const updatedStyles = styleUtils.getUpdatedStyles(
			clonedGhostkitData.styles,
			newStyles,
			device,
			selector
		);

		clonedGhostkitData.styles = updatedStyles;

		setAttributes({ ghostkit: clonedGhostkitData });
	}

	function resetStyles(resetProps, withResponsive = false, selectors = ['']) {
		const result = styleUtils.getStylesToReset(
			resetProps,
			withResponsive,
			selectors
		);

		setStyles(result);
	}

	return {
		styles,
		getStyles,
		getStyle,
		hasStyle,
		setStyles,
		resetStyles,
	};
}

```