Skip to canvas
AXA Living Styleguide
/
  1. Recently opened
  2. Back to componentsESC
  3. Clear history
Skip to sidebar

No README found.

npm install @axa-ch-webhub-cloud/
import '@axa-ch-webhub-cloud/';
...
<axa-></axa->

React

Create a React-ified with the createElement function from your React version and then use it like this:

import { createElement } from 'react';
import createAXAReact from '@axa-ch-webhub-cloud//lib/index.react';

const AXAReact = createAXAReact(createElement);

export default AXAReact;
<AXAReact></AXAReact>

Pure HTML pages

Import the -defining script and use it like this:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Your awesome title</title>
</head>
<body>
<axa-></axa->
<script src="node_modules/@axa-ch-webhub-cloud//dist/index.js"></script>
</body>
</html>

Component versioning

Different versions of our web components can coexist on the same web page! Read more about component versioning here.

Best practice

Here is the recommended new way of including user-versioned components.

import { createElement } from 'react';
import createAXAReact from '@axa-ch-webhub-cloud//lib/index.react';

const podNameAsVersionSuffix = 'YOUR UNIQUE SPA SHORT-NAME HERE'; // e.g. 'rsv'

export const AXAReact = createAXAReact(createElement, podNameAsVersionSuffix);

Apart from the best practice, other versioning schemes are possible.

Numeric versioning

import { createElement } from 'react';
import createAXAReact from '@axa-ch-webhub-cloud//lib/index.react';

const numericalVersion = '4.1.2'; // must match with SPA dependency @axa-ch-webhub-cloud/button's version

export const AXAReact = createAXAReact(createElement, numericalVersion);
// In the DOM, the button would appear as <axa--4-1-2>

Automatic npm versioning

import { createElement } from 'react';
import createAXAReact from '@axa-ch-webhub-cloud//lib/index.react';

const automaticVersion = tagName => window.customElements.get(tagName).versions[tagName];

export const AXAReact = createAXAReact(createElement, automaticVersion(''));

No CHANGELOG found.