22
33This is an embeddable component that you can include into your website to visualise RNA secondary structures.
44
5- This plugin is written in React/Redux. It is bundled as a Web Component, so it should not clash with your website's
6- javascript or CSS.
7-
85## How to use
96
107To use the latest stable version without worrying about updates, use the component's javascript package available at
11- Github :
8+ GitHub :
129
1310` <script type="text/javascript" src="https://rnacentral.github.io/r2dt-web/dist/r2dt-web.js"></script> `
1411
@@ -71,7 +68,7 @@ For a minimal example, see [urs-example.html](./urs-example.html).
7168
7269## Installation
7370
74- Download this package directly from Github .
71+ Download this package directly from GitHub .
7572
7673` git clone https://github.com/RNAcentral/r2dt-web.git `
7774
@@ -104,6 +101,19 @@ Parameters that you can use to customise some elements of this embeddable compon
104101
105102## Developer details
106103
104+ When integrating the r2dt-web component into your webpage, please be aware that its styles might conflict
105+ with the existing styles of your page. To prevent such CSS conflicts and ensure proper isolation of the
106+ component's styles, you can add the following lines to your webpage's CSS file:
107+
108+ ```
109+ r2dt-web {
110+ all: initial;
111+ }
112+ ```
113+
114+ This will reset all inherited styles for the r2dt-web component, minimizing the chances of unintended
115+ style interference.
116+
107117### Local development
108118
1091191 . ` npm install `
@@ -116,10 +126,8 @@ Parameters that you can use to customise some elements of this embeddable compon
116126
117127### Notes
118128
119- This embed is implemented as a Web Component, wrapping a piece of code in React/Redux.
120-
121- Being a Web Component, it isolates CSS styles from the main page to avoid clash of styles with it.
122- The CSS styles and fonts are bundled into the javascript inline via Webpack 3 build system, see webpack.config.js file.
129+ This embed is implemented as a Web Component, wrapping a piece of code in React/Redux.
130+ The CSS styles and fonts are bundled into the javascript inline via Webpack build system, see webpack.config.js file.
123131Upon load of r2dt-web.js, the component registers itself in the custom elements registry.
124132
125133Web Components accept input parameters as strings. That means that we have to parse parameters in Web Component
0 commit comments