rafaelrozon / react-storybook-console Goto Github PK
View Code? Open in Web Editor NEWReact Storybook Console
License: MIT License
React Storybook Console
License: MIT License
Firstly awesome add-on ๐. It is great not having to have the console open.
Maybe I have it misconfigured but the react-storybook-console
is not catching runtime prop-type warnings in development. Definitely that would be nice to have since I need to keep the console open otherwise.
As standard
storiesOf('MyComponent', module)
.addDecorator(StorybookConsole)
.add('do stuff', () => { ...... });
log.warn()
because of prop-type mismatchreact-storybook-console
component didMount and starts intercepting window.console.*
My 2minute hack
const withDelay = storyFn => React.createElement(
class Delay extends React.Component {
constructor(props) {
super(props);
this.state = {mounted: false};
}
componentDidMount() {
this.setState({mounted: true});
}
componentWillUnmount() {
this.setState({mounted: false});
}
render() {
return this.state.mounted ? storyFn() : <div />;
}
}
);
and then
storiesOf('MyComponent', module)
.addDecorator(withDelay)
.addDecorator(StorybookConsole)
.add('do stuff', () => { ...... });
Delay
wrapper renders a placeholder empty div
react-storybook-console
component didMount and starts intercepting window.console.*
Delay
wrapper sets state to mounted=true
Delay
wrapper re-renders (with new state) the actual storyFn()
log.warn()
because of prop-type mismatchThis only works where .addDecorator(withDelay)
appears before .addDecorator(StorybookConsole)
. Presumably this is the order of decorators which puts StorybookConsole
on the outside ๐
Conclusions
The hack seems to be reasonable in terms of the React methodology.
I guess it is a question whether it is compatible with storybook
internals. I would hope that decorating a story in this way doesn't produce any unwanted side effects. Certainly storybook-knobs
seem (at first glance) to be working correctly.
Is this something that could be absorbed into react-storybook-console
?
Hey! wow what an awesome addon!,
This deserves far more promotion!
I'd be happy to receive a PR on documentation featuring this for example!
Can you join us in the storybook slack?
https://storybooks-slackin.herokuapp.com/
That way we can keep you updated on the upcoming 3.0.0 release!
โค๏ธ storybook team
Hi, thanks for the project! Sometimes, the console would stop in a position, and even if there are more logs being output, it won't scroll to the bottom.
I'm using the latest version of react-storybook-console
and Chrome
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.