1.5.8 • Published 6 days ago
@financial-times/custom-code-component v1.5.8
custom-code-component (<custom-code-component>
)
Web component custom element for instantiating Visual & Data Journalism team projects
Usage:
Instantiate the web component and pass it a URL to a bundled component you wish to render into the component root.
example.jsx
import React from 'react';
import ReactDOM from 'react-dom';
import css from './Component.css?inline';
const App = (props) => <div>{JSON.stringify(props)}</div>;
export default (shadowRoot, props, ...children) => {
const style = document.createElement("style");
const mountPoint = document.createElement("div");
style.innerHTML = css;
mountPoint.id = "component-root";
shadowRoot.appendChild(style);
shadowRoot.appendChild(mountPoint);
ReactDOM.createRoot(mountPoint).render(
<React.StrictMode>
<App {...props}>{children}</App>
</React.StrictMode>
);
};
index.html
<script src="custom-code-component.js" type="module"></script>
<custom-code-component path="ft-interactive/test-project/test-component" version="^1" data-component-props="{}" data-asset-type="custom-code-component">
<img alt="test component" src="https://ig.ft.com/components/ft-interactive/test-project/test-component@^1.png">
</custom-code-component>
Attributes
path
(string)- Component name in the format
[org]/[repo]/[component]
.- If
[org]
isccc-sdk
or ommitted, component will be loaded from Vite local dev server (127.0.0.1:5173). - Otherwise, it will be loaded from the CCCCDN
- If
- Component name in the format
version
(string)- Semantic Versioning range for the component.
data-component-props
(string)- Pass stringified JSON to make it available to children as the
data
prop.
- Pass stringified JSON to make it available to children as the
iframe
(boolean)- Render inside an iframe using
srcdoc
for extra sandboxing (default: false)
- Render inside an iframe using
shadow-open
(boolean)- Sets the shadow root to either open or closed (default: false)
data-asset-type="custom-code-component"
- Part of spec.
1.5.8
6 days ago
1.5.7
6 days ago
1.5.6
6 days ago
1.5.5
6 days ago
1.5.4
6 days ago
1.5.3
6 days ago
1.5.2
6 days ago
1.5.1
6 days ago
1.5.0
6 days ago
1.3.3
14 days ago
1.3.2
14 days ago
1.3.1
14 days ago
1.3.0
29 days ago
1.2.8
30 days ago
1.2.7
30 days ago
1.2.9
30 days ago
1.2.12
30 days ago
1.2.13
30 days ago
1.2.10
30 days ago
1.2.11
30 days ago
1.2.14
30 days ago
1.2.0
1 month ago
1.2.6
1 month ago
1.2.5
1 month ago
1.2.4
1 month ago
1.2.3
1 month ago
1.1.12
1 month ago
1.1.9
2 months ago
1.1.8
2 months ago
1.1.6
2 months ago
1.1.5
2 months ago
1.1.11
2 months ago
1.1.10
2 months ago
1.1.1
3 months ago
1.1.0
3 months ago
1.0.7
3 months ago
1.0.6
3 months ago
1.1.4
3 months ago
1.1.3
3 months ago
1.1.2
3 months ago
1.0.1
3 months ago
1.0.5
3 months ago
1.0.4
3 months ago
1.0.0
4 months ago
0.0.9
4 months ago
0.0.8
5 months ago
0.0.7
6 months ago
0.0.5
6 months ago
0.0.4
6 months ago
0.0.3
6 months ago
0.0.2
6 months ago
0.0.1
6 months ago