mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-10 00:12:22 +08:00
32 lines
730 B
Plaintext
32 lines
730 B
Plaintext
```js
|
|
// my-component/component.stories.js|jsx
|
|
|
|
import { useArgs } from '@storybook/preview-api';
|
|
import { Checkbox } from './checkbox';
|
|
|
|
export default {
|
|
title: 'Inputs/Checkbox',
|
|
component: Checkbox,
|
|
};
|
|
|
|
export const Example = {
|
|
args: {
|
|
isChecked: false,
|
|
label: 'Try Me!',
|
|
},
|
|
/**
|
|
* 👇 To avoid linting issues, it is recommended to use a function with a capitalized name.
|
|
* If you are not concerned with linting, you may use an arrow function.
|
|
*/
|
|
render: function Render(args) {
|
|
const [{ isChecked }, updateArgs] = useArgs();
|
|
|
|
function onChange() {
|
|
updateArgs({ isChecked: !isChecked });
|
|
}
|
|
|
|
return <Checkbox {...args} onChange={onChange} isChecked={isChecked} />;
|
|
},
|
|
};
|
|
```
|