Pre

Displays preformatted and typically multiline text.

It implements the <pre> element.

Typically used with a <code> element child.

Styles

Import the styles within a Next.js custom app in pages/_app.js.

import 'device-agnostic-ui/public/components/Pre.css';

Use any valid <pre> props.

Deep import.

import Pre from 'device-agnostic-ui/public/components/Pre.js';

Deep require.

const Pre = require('device-agnostic-ui/public/components/Pre');

Index import. Convenient, but technically inferior to a deep import.

import { Pre } from 'device-agnostic-ui';

Index require. Convenient, but technically inferior to a deep require.

const { Pre } = require('device-agnostic-ui');

Multiline HTML code block.

import { Code, Pre } from 'device-agnostic-ui';

const result = (
  <Pre>
    <Code>{`<section>
  <h1>Header</h1>
</section>`}</Code>
  </Pre>
);

<section>
  <h1>Header</h1>
</section>