use-debug-panel

useDebugPanel provides a panel where you can modify properties of an object

Install

npm install @miroiu/use-debug-panel

Usage

import React from 'react';
import ReactDOM from 'react-dom';
import {
	DebugPanelProvider,
	makeSlider,
	makeColor,
	useDebugPanel,
} from '@miroiu/use-debug-panel';

const App: React.FC = () => {
	const { string, slider } = useDebugPanel(
		{
			number: 1,
			string: 'text',
			boolean: true,
			date: new Date(),
			slider: makeSlider(10),
			color: makeColor('#00aaff'),
			function: () => alert('Hi'),
			array: [1, 2, 4, 5],
			object: {},
			undefined: undefined,
			null: null,
		},
		'Optional Title'
	);

	return (
		<div>
			{string}: {slider.value}
		</div>
	);
};

ReactDOM.render(
	<DebugPanelProvider>
		<App />
	</DebugPanelProvider>,
	document.getElementById('root')
);

License

MIT © miroiu