@25sprout/react-starter/template/src/components/atoms/ToggleButton/index.js

25sprout web starter with React

import React from 'react';
import classnames from 'classnames';

import { useBoolean } from 'util/hook';

import style from './index.module.css';

const ToggleButton = ({ onClose, onOpen, closeTitle = 'Close', openTitle = 'Open' }) => {
	const [isOpen, { toggle }] = useBoolean({
		onTrue: onOpen,
		onFalse: onClose,
		defaultBoolean: true,
	});

	return (
		<button
			type="button"
			className={classnames(style.button, {
				[style.reverse]: !isOpen,
			})}
			onClick={toggle}
		>
			{isOpen ? closeTitle : openTitle}
		</button>
	);
};

export default ToggleButton;