Example #1
0
function getDemo(props) {
  return {
    title: 'Material demo',
    description: props.githubLocation,
    dependencies: getDependencies(props.raw),
    files: {
      'demo.js': props.raw,
      'index.js': `
import React from 'react';
import { render } from 'react-dom';
import Demo from './demo';

const rootElement = document.querySelector('#root');
if (rootElement) {
  render(<Demo />, rootElement);
}
      `,
      'index.html': `
<body>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
  <div id="root"></div>
</body>
      `,
    },
  };
}
Example #2
0
function getDemo(props, raw) {
  const demo = {
    title: 'Material demo',
    description: props.githubLocation,
    dependencies: getDependencies(raw, props.demoOptions.react),
    files: {
      'demo.js': raw,
      'index.js': `
import React from 'react';
import ReactDOM from 'react-dom';
import Demo from './demo';

ReactDOM.render(<Demo />, document.querySelector('#root'));
      `,
      'index.html': `
<body>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
  <div id="root"></div>
</body>
      `,
    },
  };

  if (props.codeVariant === CODE_VARIANTS.HOOK) {
    demo.dependencies.react = 'next';
    demo.dependencies['react-dom'] = 'next';
    demo.dependencies['@material-ui/styles'] = 'latest';
    demo.files['index.js'] = `
import React from 'react';
import ReactDOM from 'react-dom';
import Demo from './demo';
import { createMuiTheme } from "@material-ui/core/styles";
import { ThemeProvider } from "@material-ui/styles";

const theme = createMuiTheme();

ReactDOM.render(
  <ThemeProvider theme={theme}>
    <Demo />
  </ThemeProvider>,
  document.querySelector("#root")
);
    `;
  }

  return demo;
}