# ghostkit/3.3.2/gutenberg/components/element-state-toggle/index.js

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

- Page: https://pluginprobe.com/plugins/ghostkit/3.3.2/code/gutenberg/components/element-state-toggle/index.js
- Raw: https://pluginprobe.com/plugins/ghostkit/3.3.2/raw/gutenberg/components/element-state-toggle/index.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/components/element-state-toggle/index.js#L10-L20`.

```javascript
import { Button } from '@wordpress/components';
import { __ } from '@wordpress/i18n';

import getIcon from '../../utils/get-icon';
import ActiveIndicator from '../active-indicator';

/**
 * Component Class
 *
 * @param props
 */
export default function ElementStateToggle(props) {
	const {
		isHover,
		onChange,
		checkActive = () => {
			return false;
		},
	} = props;

	return (
		<Button
			className="ghostkit-control-element-state-toggle"
			onClick={() => {
				onChange(!isHover);
			}}
		>
			{getIcon('icon-pointer')}
			{checkActive() && <ActiveIndicator />}
			{isHover && <span>{__(':hover', 'ghostkit')}</span>}
		</Button>
	);
}

```