@segersniels/window

@segersniels/window

Demo

You can view it in action on my blog.

Usage

react-markdown

Use it in combination with react-markdown to nicely present code to the user.

import Window from '@segersniels/window';
import ReactMarkdown from 'react-markdown';

...

<ReactMarkdown
  source={source}
  renderers={{
    code: Window,
  }}
/>

...

Custom usage

Use it independently and pass whatever children you want to it. Please note that when passing children you will not have syntax highlighting enabled.

<Window>
  <p>Hello World!</p>
</Window>

However you can pass your own code to the value prop directly and control the language by passing the language prop. This will override any children passed.

<Window value='const foo = "bar";' language="javascript" />