I'm trying to use the bootstrap library. To do so, my first guess was to do the same as the Kotlin React tutorial :
I managed to import the bootstrap library using npm import easily but then I struggle to actually use it and in particular to add arguments. As shown in the example:
#file:JsModule("react-bootstrap")
#file:JsNonModule
import react.*
#JsName("Button")
external val ReactButton: ComponentClass<ReactButtonProps>
external interface ReactButtonProps : Props {
var variant: String
var size: String
}
Which indeed creates a button when used :
ReactButton {
variant="primary"
size = "lg"
+"Exemple"
}
But the color and size aren't changing whatever argument I put.
Then I tried to proceed like another topic on Stack Overflow: How to import node module in React-Kotlin?
But I don't understand what RProps are and RClass and I can't seem to use them.
My goal is to use a dropdown from Bootstrap but I thought trying with button first would have been easier. How do I make the button customizable?
Add this to your head tag in your index.html folder
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" />
make sure you have implementation(npm("react-bootstrap","2.4.0")) in your build.gradle.kts within your js dependencies
Related
I have a test app with react-native-web-view rendering a local HTML file
for using JS, it works if I have the JS embedded in the HTML, but if I call it on a separate JS file it won't work...
in my App.tsx:
<WebView source={{uri: `${origin}/${file}`}} style={styles.webview} />
here is the embedded HTML:
<button type="button" onclick="alabama();">Play</button>
<button type="button" onclick="alert('Hello alabama')">music</button>
<script src="./chusa.js"></script>
chusa.js:
function alabama() {
alert('Hello alabama');
}
So, alert works, the function doesn't.
How can I call the script on a separate file?
React-Native Web WebView uses an iframe in replace of the webview component, so the issue is likely due the html file (e.g. the iframe) not having access to external files once mounted/created.
Possible Solution:
If you want the file to still be external, change it to a string and use back-quotes:
export const javascript = `alert("hello")`
Import js component. Something like:
import externalJS from "./filename"
The imported variable is a string and your html should also be a string, so you'll want to append the script string to the end of the html string. Something like this:
html = html.replace('</body>', '<script>${externalJS}</script></body>')
Use the new html string as the source via prop:
<WebView source={{ html: html }/>
Note: When you say "call" the script, if you are referring to calling a function after the web webview has been created without re-rendering, then that isn't possible at this time due when using the web webview instead of an actual webview component. This is actually an issue I am trying to resolve: How do I post a message to a iframe (not webview) in React-Native?
Hopefully this helps you with your issue.
I would like to be in a position to switch between themes in primereact rather than import one theme and then it affects my whole app and I don't have an option to switch between dark or light mode.
Observing how they do it on the website www.primefaces.org/primereact/showcase/, open Developer view: Elements, and one can notice that choosing a different theme changes css file link in HTML header:
<link id="theme-link" rel="stylesheet" href="./themes/bootstrap4-light-blue/theme.css">
becomes
<link id="theme-link" rel="stylesheet" href="./themes/bootstrap4-light-purple/theme.css">
It is fairly easy to switch link element HREF from one to another.
This page talks about primereact theme switching:
Switch Your React App Between Material, Bootstrap and Custom Themes at Runtime
But the method it describes is too convoluted, involves ejecting and custom webpack, to bundle all theme CSS files and import them programmatically, like that:
const changeTheme = (theme) => {
import(`./${theme}.scss`).then((module) => {
if (selectedThemeModule) {
selectedThemeModule.unuse();
}
module.use();
setSelectedThemeModule(module);
});
}
Instead, grab the example repo where they do method of link HREF swap: github.com/mertsincan/primereact-dynamic-theming/
example-1 has code for the convoluted method from the above page, you can skip it and go to example-2, which is much simpler.
In a nutshell, add to 'public/index.html', in <header> section:
<link id="app-theme" rel="stylesheet" type="text/css" href="saga-blue.css">
And use this function:
const changeTheme = (theme) => {
let themeLink = document.getElementById('app-theme');
if (themeLink) {
themeLink.href = theme + '.css';
}
}
Then just call changeTheme(XXX) when theme XXX is clicked.
Next put .css files into the right place - just copy all node_modules/primereact/themes/*/theme.css files into public folder (giving them corresponding theme names). Some theme.css reference fonts - search for "url" in each file, and if present, copy corresponding fonts/ directory too.
I should mention that benefits of example-1 is using minified and bundled CSS files, so themes will be switching faster. If that's important, then follow the above linked tutorial and example-1. Also note that example-2 has very similar setup to example-1 (eject and custom webpack config), but only to copy css files to the right output folder, which can be skipped in favor of copying files by hand once.
I want to use bootstrap classes and my definitons in next.js modules together. How can I do it?
First, rename your .header-top to .headerTop in header.module.scss.
Then, include your class name:
<div className={`${styles.headerTop} container d-flex ...`}>
Explanation: class names in CSS modules are automatically processed to make them unique to ensure scoping. For example, .headerTop will become something like .header_headerTop__JnCx9 (.fileName_className_randomString). Therefore, in components you need to include your class names as JavaScript expressions rather than strings. Namely, if you would have one class name, you would do: <div className={styles.headerTop}></div>. But in your case you want to include your own class name with bootstrap classes (which are not CSS modules). One way of doing it is using Template literals which allow to include expressions within strings.
You need to first install bootstrap.
npm install --save bootstrap
You can only import css in one location in NextJS.
create pages/_app.js and import the css file.
import 'bootstrap/dist/css/bootstrap.min.css';
in pages/_app.js
Head Tag and insert ALL bootstrap into it:
<Head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"></link>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
</Head>
Then in any component, once you have imported your Name.module.css, e.g.:
import styles from '../styles/Navbar.module.css';
Now you can combine self-made CSS classes with Bootstrap classes like this:
<div className={`${styles.redBorder} bg-dark`}></div>
NOTE: you CAN NOT use dashes for class names, so this will NOT work:
.red-border;
this will NOT apply in next.js
instead use CamelCase.
.redBorder;
then it works.
I have tried to to that using this line of code but it doesn't work
#import url("Javascriptfile.js");
and <script type="text/javascript" src="Script.js">
these two ways doesn't work.
in js file I have
export const PrimaryColor = "#4267B2";
and I want to import it in my css file how can i do it?
I do not believe this is possible in any way.
You can manipulate CSS with JavaScript to a certain extent, but it is mostly done through DOM manipulation (acting on class names) or generating CSS programmatically (but it is still CSS in the end).
I don't think it is ever possible to access "JavaScript world" from the scope of CSS.
However, if you want to use variable names in CSS to reference constants, like colors, sizes, etc., you can use the CSS custom properties feature : https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
I am a new developer and I want to implement a popup screen in Drupal 7.
I found a code online and it works, except for the "link rel" code the example has at the <head> section.
The code is the following:
<link rel="stylesheet" href="http://www.jacklmoore.com/colorbox/example1/colorbox.css" />
I tried opening this link and adding the whole code at the styles.css file, but the popup appears without any style.
Is there a way to do it correctly?
If you added the CSS content to your CSS file maybe you should clear the CSS cache to see changes.
You also should check the selectors match to the CSS rules (for instance with Firebug in Firefox browser).
Or in the template.php you can add external CSS in this way:
function mytheme_preprocess_html(&$variables) {
`drupal_add_css('http://www.jacklmoore.com/colorbox/example1/colorbox.css',`
`array('type' => 'external'));`
}