Render inputs for stories #58

iyyafi · 2024-10-19T03:09:45Z

Hi,

I really love this project, and i hope i can contribute in this project next time (i'm not confident enough with my skill).

I have a request, could you add custom render function as inputs in stories? like this one https://storybook.js.org/docs/api/csf#custom-render-functions.
The reasons are i need to show the mobile and desktop version of my component.

Thank you.

ocavue · 2024-10-19T13:10:16Z

Thanks for your kind words.

I can see the value of custom render functions, but their implementation varies depending on the framework. For example, React’s render functions return a JSX element, Vue’s render functions return an object and you cannot use Vue SFC in it, while Svelte doesn’t support render functions (since you cannot represent a Svelte component as a function). Because of that, it requires quite a lot of work to support render functions for different frameworks in Astrobook.

In the meantime, you can create your own wrapper component for showing mobile and desktop versions. Here is an example:

// MyComponent.tsx
// You actual component
export default function MyComponent () {
  return <div>...</div>
}

// MyComponentRendering.tsx
// A component that wraps MyComponent with different size of containers.
export default function MyComponentRendering ({size}: {size: 'mobile'|'desktop'}) {
  if (size === 'mobile') {
    return <div style={{maxWidth: "400px"}}><MyComponent/></div>
  } else {
    return <div style={{maxWidth: "1200px"}}><MyComponent/></div>
  }
}

// MyComponent.stories.ts
import MyComponentRendering from './MyComponentRendering.tsx'

export default {
  component: MyComponentRendering,
}

export const Mobile = {
  args: {
    size: 'mobile',
  }
}

export const Desktop = {
  args: {
    size: 'desktop',
  }
}

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Render inputs for stories #58

Render inputs for stories #58

Uh oh!

Uh oh!

Render inputs for stories #58

Render inputs for stories #58

Comments

Uh oh!

Uh oh!