score:24
Accepted answer
you need to use the typescript version, it's an option in the docs now (https://storybook.js.org/docs/react/get-started/whats-a-story), but the relevant code is below:
import {meta, story} from "@storybook/react";
export default {
title: "button",
component: button,
} as meta;
//👇 we create a “template” of how args map to rendering
const template: story<buttonprops> = (args) => <button {...args} />;
export const primary = template.bind({});
primary.args = {
primary: true,
label: 'primary',
};
score:3
if you are using vue3
import button from '../components/button.vue'
import { ibuttonprops } from '../types/types'
import { meta, story } from '@storybook/vue3'
export default {
title: 'example/button',
component: button,
argtypes:{
backgroundcolor: { control: 'color' },
size: {
control: { type: 'select', options: ['small', 'medium', 'large'] },
},
onclick: {},
},
} as meta;
const template: story<ibuttonprops> = (args ) => ({
components: { button },
setup() {
return { args }
},
template: '<button v-bind="args" />',
})
export const primary = template.bind({})
primary.args = {
primary: true,
title: '\u{1f9d1}\u{200d}\u{1f3a8}',
backgrouncolor: 'red'
}
Source: stackoverflow.com
Related Query
- using props in makeStyle throwing error Property 'height' does not exist on type '{}'
- forwarding ref to react.FC gives type error: Property ref does not exist on type 'IntrinsicAttributes & Props & { children :? ReactNode}
- How to set function props type for its child in Typescript? Property 'children' does not exist on type TS2339
- Property 'props' does not exist on type '{}' (trying to get access to props of children) - React Typescript
- Material-UI: Property 'X' does not exist on type '{}' when passing props to makestyles in React
- Range Input orient props - Property 'orient' does not exist on type 'DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>'
- props from contextual provider: property 'yyy' does not exist on type 'intrinsicattributes & interfaceprops'
- Property 'value' does not exist on type 'Readonly<{}>'
- TypeScript error: Property 'X' does not exist on type 'Window'
- typescript + react/redux: property "yyy" does not exist on type 'intrinsicattributes & intrinsicclassattributes
- Typescript complains Property does not exist on type 'JSX.IntrinsicElements' when using React.createClass?
- error TS2339: Property 'for' does not exist on type 'HTMLProps<HTMLLabelElement>'
- TypeScript error after upgrading version 4 useParams () from react-router-dom Property 'sumParams' does not exist on type '{}'
- Property 'exact' does not exist on type
- Property 'toBeInTheDocument' does not exist on type 'Matchers<any>'
- Trigger click in Typescript - Property 'click' does not exist on type 'Element'
- Property does not exist on type 'DetailedHTMLProps, HTMLDivElement>' with React 16
- TS2339: Property 'tsReducer' does not exist on type 'DefaultRootState'
- Property ... does not exist on type 'IntrinsicAttributes & ...'
- Property 'XYZ' does not exist on type 'Readonly<{ children?: ReactNode; }> & Readonly<{}>'
- Property 'hot' does not exist on type 'NodeModule'.ts(2339)
- TS2339: Property 'props' does not exist on type 'Home'
- TypeScript error: Property 'children' does not exist on type 'ReactNode'
- TypeScript error: Property 'scrollIntoView' does not exist on type 'never'. TS2339
- Property 'value' does not exist on type 'never'. when use useRef hook in mui
- ts(2322) Property children does not exist on type 'Intrinsic attributes and Props'
- Property does not exist on type 'IntrinsicAttributes & { children?: ReactNode; }'
- Generics error with forwardRef: Property 'ref' does not exist on type 'IntrinsicAttributes'
- Property 'current' does not exist on type '((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement>'
- In ReactJS trying to get params but I get property 'id' does not exist on type '{}'
More Query from same tag
- onClick like button likes all objects in array React JS
- Node/Express logging the correct response, but React frontend logging something completely different
- Displaying images with img tag in React.js
- Download file from data of an API response with react-admin
- How do I create an overlay in React?
- Why is this handleBlur function with event parameters when the event parameter is not used inside the function?
- react lifecycle componentWillReceiveProps how to change getDerivedStateFromProps then send redux action
- making a tool tip, but i encounter this error: TypeError: Cannot read property 'handleMouseIn' of undefined
- Exit transition not triggered in Framer Motion for React components rendered in Array.map() (or conditionally)
- Module not found: Can't resolve './node_modules/@material-ui/core/IconButton'
- Event Bubbling from Parent to Child on Target Click
- Why is React's useEffect hook not called here before the function returns?
- Firebase ref.on('value') continuously calls, even when there is no change
- Dispatch is not a function react
- How to implement multiple route with single container or layout in react-router-dom v6
- setState not .slicing() into state's array the way I'm intending
- How to exclude parts of a JS program from testing to avoid coverage reduction?
- How to add custom class to swiper slider on its events in React?
- React component not rendering on DOM
- Getting undefined values in ReactJs
- React JS pass state altering function to child
- Change the style of individual element in React component which return multiple repeated elements
- this.state value not updating from console
- Getting ReactTransitionGroup and Redux-Simple-Router to work together
- React not rerendering after mobx observer change
- Unable to see Content-Disposition header in create-react-app
- Exiting Fullscreen in Reactjs
- Uncaught TypeError: dispatcher.useSyncExternalStore is not a function
- how to bind "this" when passing a React prop into axios.post
- Should I use redux-form store instead of component state and Redux custom store?