-
import Avatar, { sizes } from "./Avatar"; export const Default = () => ( ); // We can now create an array of sizes from the exported object. // Unfortunately we have to cast the array using `as`, // because `Object.keys` only returns `string[]`. // https://github.com/Microsoft/TypeScript/issues/12870 const sizeKeys = Object.keys(sizes) as Size[]; export const Sizes = () => (
{/* We can loop over the array of sizes */} {sizeKeys.map(size) => ( )} div> ); -
SaaSHub
SaaSHub - Software Alternatives and Reviews. SaaSHub helps you find the best software and product alternatives
-
storybook
Storybook is the industry standard workshop for building, documenting, and testing UI components in isolation
Sometimes it is easier to build a component in isolation than in the place where it will be used. It is much easier to test all variations and edge cases of the component. There are tools out there which can help us to build our components in isolation. The most famous is Storybook, but I like to use Ladle. Ladle is much smaller than Storybook and it is built for speed. In this post we will set up Ladle and we will learn how we can use next/image within Ladle.
-
After another look at issue #100, we can tell next/image that it should skip the optimization if the component is rendered in Ladle. That is fine, because the bandwidth does not play a big role during the development. With the following code placed inside .ladle/components.tsx ...
-
And for most installations, that's it. Ladle has a useful default configuration, you only need to create a configuration if your installation differs from the default. But for most Next.js installations the default does not fit. Ladle expects stories and components in the "src" folder, but in many Next.js installations they are in a folder called components. So we have to create a configuration at .ladle/config.mjs:
