@crazyfactory/storybook-props-mock-addon
v1.2.0
Published
It will generate translation based on `translation` prop's keys.
Downloads
10
Maintainers
Keywords
Readme
Only translation
can be mocked for now
It will generate translation based on translation
prop's keys.
Usage
webpack.config.js
loader: path.resolve('./node_modules/@crazyfactory/storybook-props-mock-addon/lib/reactTypescriptTranslationLoader.js')
config.js
import {withMockedTranslation} from "@crazyfactory/storybook-props-mock-addon/lib/withMockedTranslation";
addDecorator(withMockedTranslation());
story files
export const Simple = ({mockedTranslation}) => (
// pass mockedTranslation to translation prop
);
Example
CustomerInfo.tsx
import * as React from "react";
interface IProps {
firstName: string;
lastName: string;
translation: {
firstName: string;
lastName: string;
}
}
export class CustomerInfo extends React.Component<IProps> {
public render(): JSX.Element {
const {firstName, lastName, translation} = this.props;
return (
<div>
<div>
{translation.firstName}: {firstName}
</div>
<div>
{translation.lastName}: {lastName}
</div>
</div>
);
}
}
CustomerInfo.stories.tsx
import * as React from "react";
import {CustomerInfo} from "./CustomerInfo";
export default {
component: CustomerInfo,
title: "CustomerInfo"
}
export const Simple = ({mockedTranslation}) => (
<CustomerInfo firstName={"John"} lastName={"Lee"} translation={mockedTranslation}/>
);
Then run storybook, the addon will generate translation for you by pascalizing translation keys