Components

July 27, 2019•1 minute read

Gallery

Usage:

(space between <Gallery> and children is important)

<Gallery>

![image 1](../img/author.png)
![image 2](../img/author.png)
![image 3](../img/author.png)
![image 4](../img/author.png)
![image 5](../img/author.png)
![image 6](../img/author.png)

</Gallery><Gallery>
![image 1](../img/author.png)
![image 2](../img/author.png)
![image 3](../img/author.png)
![image 4](../img/author.png)
![image 5](../img/author.png)
![image 6](../img/author.png)
</Gallery>

Image with caption

This is a caption for this image

Usage:

(space between <Image> and children is important)

<Image caption="This is a caption for this image">

![image 1](../img/components.jpg)

</Image><Image caption="This is a caption for this image">
![image 1](../img/components.jpg)
</Image>

Scaled down image

This is a caption for this image

Usage:

(space between <Image> and children is important)

<Image caption="This is a caption for this image" width="400">

![image 1](../img/components.jpg)

</Image><Image caption="This is a caption for this image" width="400">
![image 1](../img/components.jpg)
</Image>

Plain image

Iframe

Third party embeds might not respect do not track policy.

Usage:

<Iframe src="https://codesandbox.io/embed/4rn8vm4nv0?expanddevtools=1&view=preview" width={920} height={600} disableOverlay={false} /><Iframe src="https://codesandbox.io/embed/4rn8vm4nv0?expanddevtools=1&view=preview" width={920} height={600} disableOverlay={false} />

Javascript code sample:

class Example extends React.Component {
  render() {
    return <strong>Hello World!</strong>
  }
}class Example extends React.Component {
  render() {
    return <strong>Hello World!</strong>
  }
}

CSS code sample:

body {
  color: white;
}body {
  color: white;
}

Code sample with filename:

example.js

class Example extends React.Component {
  render() {
    return <strong>Hello World!</strong>
  }
}class Example extends React.Component {
  render() {
    return <strong>Hello World!</strong>
  }
}

Live code sample which you can edit:

example.js

Edit
class Example extends React.Component {
  render() {
    return <strong>Hello World!</strong>
  }
}class Example extends React.Component {
  render() {
    return <strong>Hello World!</strong>
  }
}

Hello World!

Monospaced font with programming ligatures by Fira Code.

const isEqual = (prev, next) => prev === next;
const notEqual = (prev, next) => prev !== next;const isEqual = (prev, next) => prev === next;
const notEqual = (prev, next) => prev !== next;

Components

.css-skxydp{color:inherit;}.css-skxydp:hover{-webkit-text-decoration:none;text-decoration:none;}Gallery

Usage:

Image with caption

Usage:

Scaled down image

Usage:

Plain image

Iframe

Usage:

Javascript code sample:

CSS code sample:

Code sample with filename:

Live code sample which you can edit:

Gallery