score:1
i liked the idea of a helper function so i went playing around. it does cast to any
inside the function but it doesn't matter for it's usage.
import react from "react";
import { meta, story } from "@storybook/react";
import { box, boxprops } from "./box";
type bindtemplate = <t extends story<any>>(template: t, args: t["args"]) => t;
const bindtemplate: bindtemplate = (template, args) => {
const boundtemplate = (template as any).bind({});
boundtemplate.args = args;
return boundtemplate;
};
const config: meta = {
title: "box",
component: box,
};
export default config;
const template: story<boxprops> = (args) => <box {...args}>lol</box>;
export const primary = bindtemplate(template, {
classname: "valid",
someinvalidprops: "invalid",
});
score:3
we use generic like this in our storybook:
maybe you can do a similar thing
import react from 'react'
import { meta, story } from '@storybook/react/types-6-0'
import selectdropdown, { iselectdropdownprops, selectoption } from './selectdropdown'
export default {
title: 'shared/components/selectdropdown',
component: selectdropdown,
argtypes: {
options: {
control: {
type: 'object',
},
},
(...)
} as meta
const template = <t extends {}>(): story<iselectdropdownprops<t>> => args => (
<div
style={{
width: '300px',
}}
>
<selectdropdown<t> {...args} />
</div>
)
export const normal = template<number>().bind({})
normal.args = {
options: createoptions(5),
}
Source: stackoverflow.com
Related Query
- How to create generic typescript function that binds arguments for storybook control
- How can I create a reusable function that will setState for a variable object property?
- How to create a generic wrapper function for saga error handling?
- How to create React Context that passes a function with Typescript
- How to create a generic arrow function with react and typescript
- How to create a function with fixed single argument that ignores callback arguments
- Generic TypeScript Type for functions returning functions that replaces the ReturnType with the ReturnType of the returned function
- How can I type a generic component that takes as one of its arguments a function that returns an AxiosResponse?
- How do I create a TypeScript type definition for a stateless React component?
- How can I define TypeScript type for a setState function when React.Dispatch<React.SetStateAction<string>> not accepted?
- How do I write a storybook story for a component that has redux-connected component as grandchild?
- How to create a typescript type that validates string format? i.e. checks is string is valid css length property
- How to initialise the set function of useState for TypeScript in a createContext?
- How i can create the function for the countdown in React native?
- How to pass arguments to callback in React + Typescript without new function creation?
- how do you pass a generic type to an anonymous function in typescript tsx file
- How to typecheck a generic function using a value of that same generic type in Flow
- How to avoid using inline functions in React (ES6) for functions that take arguments
- Variable number of generic arguments for React component in Typescript
- How can I check a function for having arguments without checking their values, using jest & enzyme in react component?
- How to create a decorator that adds a single function to the component class?
- How to define a typescript type for a dictionary with generic keys?
- How to create a test for a screen that uses the same hook several times? React Testing Library
- How to create a wrapper for an Apollo query that uses React hooks
- How to create my own onChangeComplete function for input type color on React
- How to create generic function Component
- How to create a function that doesn't do anything in React
- Create a custom onChange function as a parameter for a component in react, which takes 2 custom arguments
- How to add two arguments using Typescript Generics in Arrow Function
- How can I pass default theme that is provided by MUI5 and create a style for any component in MUI5?
More Query from same tag
- Problems with react for animation
- TypeError: Cannot read property 'subscribe' of undefined PersistGate.componentDidMount
- How to check if user input is valid?
- warning : is defined but never used
- Error: Must use destructuring state assignment in react using Websoket
- Converting stateful React component to stateless functional component: How to implement "componentDidMount" kind of functionality?
- Handle login using Google Authentication in system with client and server running on different port reactJS and nodeJS
- onDrop event not fired in react app
- Importing an image into an <src> tag in React.js when the image name is not known in advance
- Failed to load resource: the server responded with a status of 405 (Not Allowed) needs help on nginx.conf
- Order an array of objects based in other array values
- trigger react-ace onChange via React Testing Library (RTL)
- Render data from Firebase Firestore in React
- aws-amplify client side password validation
- The "path" argument must be of type string. Received undefined. not sure why?
- How to use react-datepicker with redux form?
- How can I change the format for react datepicker days of the week?
- React.js & backend on App Engine as services?
- React: Cannot design list item's index number (using map)
- How do I properly changing response data in RTK Query?
- Redux-form not formatting post data and [object Object] issue
- Populate table with JSON data and variable columns
- can I have logic code if else statements within catch statement?
- How to fix "TypeError: items.map is not a function" when working with React and APIs?
- is sending state of current component as a parameter to another external method possible in react
- What is difference between lifecycle method and useEffect hook?
- Can not use keyword 'await' outside an async function
- Getting Rocketchat History in React
- why do I get the error X is not iterable when setting state with the spread operator?
- Dynamically changing background image and other properties on a component