Skip to content
This repository has been archived by the owner on Nov 1, 2023. It is now read-only.

Latest commit

 

History

History
73 lines (55 loc) · 1.71 KB

index.md

File metadata and controls

73 lines (55 loc) · 1.71 KB
Raw
title sidebar
Guide
auto

Installation

Using a CDN

Include the following to your document

<head>
  <link rel="stylesheet" type="text/css" href="https://unpkg.com/@dfds-frontend/react-components/dist/dfds.css" />
</head>
<body>
  <script src="https://unpkg.com/@dfds-frontend/react-components/dist/dfds.js"></script>
</body>

Either copy the content on https://unpkg.com/@dfds-frontend/react-components/dist/icons.min.svg into the top of your body element in your html file or apply this script at the bottom of your <body> element.

<script>
  window.Dfds.loadIcons({
    path: 'https://unpkg.com/@dfds-frontend/react-components/dist/icons.min.svg',
    callback: undefined /* optional: add a callback */
  });
</script>

The React components are available from the window object.

const { Icon, Button } = window.Dfds;

Using NPM

Install @dfds-frontend/react-components from NPM:

npm i -S @dfds-frontend/react-components

Them import components from the package and use them

import { Icon, Button } from '@dfds-frontend/react-components';

<Button modifiers="call-to-action" onClick={event => console.log(event.target)}>
  click
</Button>;

Add the css and svg icons to the page.

<head>
  <link rel="stylesheet" type="text/css" href="https://unpkg.com/@dfds-frontend/react-components/dist/dfds.css" />
  <!-- or use the file from node_modules/@dfds-frontend/react-components folder -->
</head>
import { loadIcons } from '@dfds-frontend/react-components';

loadIcons({
  path: yourPath + 'node_modules/@dfds-frontend/react-components/dist/icons.min.svg',
  callback: undefined /* optional: add a callback */
});
/* or use the path from CDN */