How to use react-live - 10 common examples

import React from 'react';
import { withLive } from 'react-live';

import { Box, Text } from 'grommet';

const PlaygroundError = withLive(({ error }) => {
  if (!error) {
    return null;
  }
  return (
    
      
    
  );
});

export { PlaygroundError };

language: string
  theme: PrismTheme
  onChange: () => void
  onError: () => void
}

interface WithLiveProps {
  children: (error?: string) => ReactNode
  live?: LiveProps
}

const LivePreviewWrapper = styled.div`
  position: relative;
`

export const LiveConsumer = withLive(({ children, live }) => {
  return <>{children((live as LiveProps).error)}
})

interface ActionProps {
  editorIsVisible: boolean
}

interface CopyButtonProps extends ActionProps {
  code: string
}

export const CopyButton: FC = ({ code, editorIsVisible }) => {
  return (
    
      {(eventHandlers, ref) => (

)}
          
          {codeOpen && }
          {live && }
        
      
    );
  }
}

LiveDemo.propTypes = propTypes;
LiveDemo.defaultProps = defaultProps;

export default withLive(LiveDemo);

import React from 'react';
import { withLive } from 'react-live';

import { Box, Heading } from 'grommet';
import { Gremlin } from '../Gremlin';

const PlaygroundPlaceholder = withLive(({ error }) => {
  if (!error) {
    return null;
  }
  return (
    
      Oh, no!
      
        Something went wrong, check your code...

\`
`).trim()

import {
  BloombergLogo,
  AtlassianLogo,
  RedditLogo,
  TargetLogo,
  EuroVisionLogo,
  ArtsyLogo,
  IdeaLogo,
  HuffpostLogo,
  CoinbaseLogo,
} from '../components/CompanyLogos'

const HomepageLivePreview = withLive(({
  live: { element: Button = FallbackButton },
  className,
  ...rest
}) => {
  const LiveButton = Button.extend.withConfig({ componentId: 'LiveButton' })``
  const LiveInternalButton = Button.withComponent(Link).extend.withConfig({ componentId: 'LiveInternalButton' })``

  return (
    <div>
      </div>

);
  }
}

const prettierComment = /(\{\s*\/\*\s+prettier-ignore\s+\*\/\s*\})|(\/\/\s+prettier-ignore)/gim;

const { background, foreground } = css`
  @import '../css/theme';

  :export {
    background: $lighter;
    foreground: $subtleOnDark;
  }
`;

const Preview = withLive(
  class extends React.Component {
    constructor() {
      super();

      this.example = null;
    }

    componentDidMount() {
      import('holderjs').then(({ default: hjs }) => {
        this.hjs = hjs;
        hjs.addTheme('gray', {
          bg: background,
          fg: foreground,
          font: 'Helvetica',
          fontweight: 'normal',
        });

ns: 'react-yandex-maps-sandbox',
  },
};

scope.Map.defaultProps = {
  ...scope.Map.defaultProps,
  width: '100%',
  height: 240,
};

const PreviewContainer = styled(Flex)`
  border-radius: 2px;
  overflow: hidden;
`;

const StyledEditor = styled(ReactLive.LiveEditor)`
  &[class*='language-'] {
    margin: 0;
    border-radius: 0;
    box-shadow: none;
  }
`;

const StyledPreview = styled(ReactLive.LivePreview)`
  overflow: auto;
`;

const StyledError = styled(ReactLive.LiveError)`
  border-radius: 2px;
  overflow: auto;
`;

overflow: hidden;
`;

const StyledEditor = styled(ReactLive.LiveEditor)`
  &[class*='language-'] {
    margin: 0;
    border-radius: 0;
    box-shadow: none;
  }
`;

const StyledPreview = styled(ReactLive.LivePreview)`
  overflow: auto;
`;

const StyledError = styled(ReactLive.LiveError)`
  border-radius: 2px;
  overflow: auto;
`;

export class LiveEditor extends React.Component {
  constructor() {
    super();
    this.state = { editor: true, preview: true };
  }

  render() {
    const { code, language, noInline } = this.props;
    const { editor, preview } = this.state;

    return (

};

const PreviewContainer = styled(Flex)`
  border-radius: 2px;
  overflow: hidden;
`;

const StyledEditor = styled(ReactLive.LiveEditor)`
  &[class*='language-'] {
    margin: 0;
    border-radius: 0;
    box-shadow: none;
  }
`;

const StyledPreview = styled(ReactLive.LivePreview)`
  overflow: auto;
`;

const StyledError = styled(ReactLive.LiveError)`
  border-radius: 2px;
  overflow: auto;
`;

export class LiveEditor extends React.Component {
  constructor() {
    super();
    this.state = { editor: true, preview: true };
  }

  render() {
    const { code, language, noInline } = this.props;

import css from '@emotion/css'
import { mq, fonts } from './style'
import prismStyles from 'react-live/lib/constants/css.js'
import draculaStyles from './dracula-prism'

const globalStyles = css`
  ${prismStyles
    .replace('prism-code', 'prism-code,pre[class*="language-"]')
    .replace(/0\.5rem/g, '')} html, body, #___gatsby {
    font-family: ${fonts.primary};
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    -webkit-font-smoothing: antialiased;
  }

  .gatsby-highlight,
  .prism-code {
    ${draculaStyles};
    pre[class*='language-'] {
      ${mq({
        marginLeft: 0,