BVB Source Codes

storybook Show preview.js Source code

Return Download storybook: download preview.js Source code - Download storybook Source code - Type:.js
  1. import PropTypes from 'prop-types';
  2. import React, { Component } from 'react';
  3.  
  4. const iframeStyle = {
  5.   width: '100%',
  6.   height: '100%',
  7.   border: 0,
  8.   margin: 0,
  9.   padding: 0,
  10. };
  11.  
  12. class Preview extends Component {
  13.   shouldComponentUpdate() {
  14.     // When the manager is re-rendered, due to changes in the layout (going full screen / changing
  15.     // addon panel to right) Preview section will update. If its re-rendered the whole html page
  16.     // inside the html is re-rendered making the story to re-mount.
  17.     // We dont have to re-render this component for any reason since changes are communicated to
  18.     // story using the channel and necessary changes are done by it.
  19.     return false;
  20.   }
  21.  
  22.   render() {
  23.     return (
  24.       <iframe
  25.         id="storybook-preview-iframe"
  26.         style={iframeStyle}
  27.         src={this.props.url}
  28.         allowFullScreen
  29.       />
  30.     );
  31.   }
  32. }
  33.  
  34. Preview.propTypes = {
  35.   url: PropTypes.string.isRequired,
  36. };
  37.  
  38. export default Preview;
  39.  
downloadpreview.js Source code - Download storybook Source code
Related Source Codes/Software:
ionicons - The premium icon font for Ionic ... 2017-06-07
AsyncDisplayKit - Smooth asynchronous user interfaces for iOS apps. ... 2017-06-07
lottie-android - Render After Effects animations natively on Androi... 2017-06-07
parse-server - Parse-compatible API server module for Node/Expres... 2017-06-07
prettier - Prettier is an opinionated JavaScript formatter. ... 2017-06-08
inferno - An extremely fast, React-like JavaScript library f... 2017-06-08
guetzli - Perceptual JPEG encoder 2017-06-08
cs-video-courses - List of Computer Science courses with video lectur... 2017-06-08
interviews - Everything you need to know to get the job. 2017-06-08
CRYENGINE - CRYENGINE is a powerful real-time game development... 2017-06-11
postal - 2017-06-11
reactide - Reactide is the first dedicated IDE for React web ... 2017-06-11
rkt - rkt is a pod-native container engine for Linux. It... 2017-06-11
uWebSockets - Tiny WebSockets https://for... 2017-06-11
realworld - TodoMVC for the RealWorld - Exemplary fullstack Me... 2017-06-11
goreplay - GoReplay is an open-source tool for capturing and ... 2017-06-10
pyenv - Simple Python version management 2017-06-10
redux-saga - An alternative side effect model for Redux apps ... 2017-06-10
angular-starter - 2017-06-10

 Back to top