I have react project with bootstrap packages
// npm install bootstrap#next
// npm install bootstrap-icons
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.bundle.min';
import 'bootstrap-icons/font/bootstrap-icons.css'
Then I have the tooltip element
<i className="bi bi-align-center" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top"></i>
The documentation says, we have to execute this javascript in order to enable bootstrap tooltip
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})
So I put the code inside componentDidMount method, in a class where I am rendering the tooltip
but I am getting an error
'bootstrap' is not defined no-undef
or when I adjust the import tag to
import { bootstrap } from 'bootstrap/dist/js/bootstrap.bundle.min';
I get another error
Cannot read property 'Tooltip' of undefined
So I am confused how to enable this tooltip?
This is my vanilla TypeScript version.
Install and import bootstrap & typings
npm i #types/bootstrap bootstrap
import "bootstrap"
import "bootstrap/dist/css/bootstrap.css"
Create Tooltip component
import { Tooltip as BsTooltip } from "bootstrap"
import React, { useEffect, useRef } from "react"
export const Tooltip = (p: {children: JSX.Element, text: string}) => {
const childRef = useRef(undefined as unknown as Element)
useEffect(() => {
const t = new BsTooltip(childRef.current, {
title: p.text,
placement: "right",
trigger: "hover"
})
return () => t.dispose()
}, [p.text])
return React.cloneElement(p.children, { ref: childRef })
}
Use
<Tooltip text="Tooltip text">
<button className="btn btn-primary" type="button">My button</button>
</Tooltip>
You don't need to use react-bootstrap at all since Bootstrap 5 is now vanilla JavaScript...
You can import Bootstrap 5 JS components like this (note .esm version for modular importing)...
import { Tooltip } from 'bootstrap.esm.min.js'
then you can refer to the Tooltip like this...
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-
toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new Tooltip(tooltipTriggerEl)
})
React Bootstrap Tooltip example
When using Bootstrap with React, it is highly recommended to use React-Bootstrap.
React-Bootstrap has an OverlayTrigger component and a Tooltip component you can use for adding hover-able Tooltips.
In your case, it would look something like this
<OverlayTrigger
placement={'top'}
delay={{ show: 250, hide: 400 }}
overlay={
<Tooltip>
Tooltip on top
</Tooltip>
}
>
<i className="bi bi-align-center" />
</OverlayTrigger>
For using bootstrap in React, it is recommended to use react-bootstrap.
The steps to integrate that in your project are:
Install bootstrap in your project by adding package through terminal : npm install react-bootstrap bootstrap
Add this in your App.js.
import 'bootstrap/dist/css/bootstrap.min.css';
Add tooltip in your component by importing tooltip as follows: import { Tooltip} from 'react-bootstrap';
This would be the same for every react-bootstrap component
React-Bootstrap Tooltip documentation : https://react-bootstrap.github.io/components/overlays/#tooltips
Related
I want to use fontAwesome icons in ReactJs. I have not done this before. I want to do something like home Icons as well as Signout Icons in React.
Here is what I have done so far.
I included the font awesome Lib
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome'
Now I want to use in the application Like so
<td width="150px">
<p align="center"/>
<button className="btn"><i className='icon-home'></i></button>
</td>
<td width="135">
<p align="center"/>
<button className="btnSignout"><i className='fa fa-home'></i></button>
</td>
How do I use FontAwesome in React Application?
To use Font Awesome in the react project, you should have to -
install the following packages (run the following commands in the terminal)
npm i --save #fortawesome/fontawesome-svg-core
npm install --save #fortawesome/free-solid-svg-icons
npm install --save #fortawesome/react-fontawesome
Now it's time to call and use into the JavaScript file.
import into the file the following 2 lines.
import { FontAwesomeIcon } from "#fortawesome/react-fontawesome";
import { faMugHot } from '#fortawesome/free-solid-svg-icons';
The format of using icon is as follow,
<FontAwesomeIcon icon={faIconName, faAnotherIconName} />
for Example: `<FontAwesomeIcon icon={faAnchor, faMugHot} />
Note: icon name will be camelcase fa<IconName>. for example, in the font-awesome website font name is fa-anchor we can write it as faAnchor. for long name of the icon, if the name is fa-mug-hot we have to write it as faMugHot.
To use font awesome icons in easy way into your React project use react-icon library which not only provides support for font awesome but as well as provides for Bootstrap icons , Heroicons and more.
Step 1. npm install react-icons --save
step 2. Import a icon like this -
import { FaBeer } from 'react-icons/fa';
Note: FaBeer is icon name here for more icons visit to react-icons
Step 3. Use it something like this -
class Question extends React.Component {
render() {
return <h3> Lets go for a <FaBeer />? </h3>
}
}
You can do this, check below code or click here for demo
Please double check the libraries I used and install
import React, { Component } from 'react';
import { render } from 'react-dom';
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome';
import { faCoffee, faBars } from '#fortawesome/free-solid-svg-icons';
import 'bootstrap/dist/css/bootstrap.min.css';
class App extends Component {
constructor() {
super();
}
render() {
return (
<div>
<p>Please check this</p>
<button className="btn btn-primary">
<FontAwesomeIcon icon={faBars} size={'1x'} />
<span style={{ marginLeft: '10px' }}> My Button</span>
</button>
<br />
<br />
<FontAwesomeIcon icon={faCoffee} size={'2x'} />
</div>
);
}
}
render(<App />, document.getElementById('root'));
I Install all 3 required modules in react app.
npm i --save #fortawesome/fontawesome-svg-core
npm install --save #fortawesome/free-solid-svg-icons
npm install --save #fortawesome/react-fontawesome
I am trying to add font awesome icon in my program. But it is not showing up.Do I need to copy Font Awesome link and add in my app. That's what I used to do it in my html program.
(For example )
But in react how to do it? I tried the way which is in the document but it is not working. I only added the part of my program.Please help.
import React from 'react';
import { Form, Button} from 'react-bootstrap';
import './ContactUs.css';
import { library } from '#fortawesome/fontawesome-svg-core'
import { fab } from '#fortawesome/free-brands-svg-icons'
import { faCheckSquare, faShare} from '#fortawesome/free-solid-svg-icons'
library.add(fab, faCheckSquare, faShare)
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome'
// import { faShare } from '#fortawesome/free-solid-svg-icons'
class ContactUs extends React.Component{
render(){
return(
<div>
<Button className="btn send-button mt-4">
SUBMIT
<FontAwesomeIcon icon="share" />
</Button>
</div>
)
}
}
export default ContactUs;
I don't find any issue except one thing.
As you are using individual icon instead of, <FontAwesomeIcon icon="share" /> you must use write like this
<FontAwesomeIcon icon={faShare} />
Please check the below link for reference.
https://codesandbox.io/s/frosty-glade-9ful6?file=/src/App.js
This is an out-of-the-box Create React App install, and I have only done two things:
npm install react-bootstrap bootstrap
Changed App.js as follows:
import logo from './logo.svg';
import './App.css';
import Button from 'react-bootstrap/Button';
function App() {
function buy() {
alert('Clicked Buy');
}
function sell() {
alert('Clicked Sell');
}
return (
<div>
<Button variant='success' onClick={buy}>
Button1
</Button>
<Button variant='danger' onClick={sell}>
Button2
</Button>
</div>
);
}
export default App;
The buttons look the same as before I changed them from <button> to <Button variant=...:
You have to import the css for the buttons to work
import 'bootstrap/dist/css/bootstrap.min.css';
Add these lines to App.js, as per https://react-bootstrap.github.io/getting-started/introduction/#stylesheets
import 'bootstrap/dist/css/bootstrap.min.css';
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
crossorigin="anonymous"
/>
The link statement is not required.
Results after adding css:
You need to convert it to a ES6 class definition:
import 'bootstrap/dist/css/bootstrap.min.css';
import logo from './logo.svg';
import './App.css';
class App extends React.Component {
constructor(props) {
super(props);
// This binding is necessary to make `this` work in the callback
this.buy = this.buy.bind(this);
this.sell= this.sell.bind(this);
}
function buy() {
alert('Clicked Buy');
}
function sell() {
alert('Clicked Sell');
}
return (
<div>
<Button variant='success' onClick={buy}>
Button1
</Button>
<Button variant='danger' onClick={sell}>
Button2
</Button>
</div>
);
}
App()
Instead of npm install react-bootstrap , i did npm install react-bootstrap bootstrap as it says in the documentation.
Your code is right, but you should also add
import 'bootstrap/dist/css/bootstrap.min.css';
in App.js
Follow these instructions
https://create-react-app.dev/docs/adding-bootstrap/
You need to add the dependencies in the package.json file (this is what yarn add react-bootstrap bootstrap will do).
Then yarn, to install the bootstrap-react node module.
Then you need to import of the bootstrap.css file. Add that import line to the top of the index.js file.
import 'bootstrap/dist/css/bootstrap.css';
You can then see that it's imported when you inspect the html in devtools.
I'm trying to use this css style to styling my react app. But the css didn't work in my element, how to solve it ?
import React, { Component } from 'react';
import style from './styles/css/bootstrap.css';
class App extends Component {
render() {
return (
<div>
<button className={style['btn', 'btn-primary']}>test button</button>
</div>
);
}
}
export default App;
import style from './styles/css/bootstrap.css';
What are you expecting the import to do? If it is to just include the css, then you don't need to give it a name.
import './styles/css/bootstrap.css';
Should be enough.
style['btn', 'btn-primary']
Styling in react comes in various flavours. I would recommend reading the official documentation for it. Assuming you just want to use the classes: btn and btn-primary, you can just pass them to react as:
<button className="btn btn-primary">test button</button>
I'm using Office Fabric UI in React. I'd like to use Font Awesome icons on an icon button instead of the Fabric ones.
Can anyone show me how I'd do this?
This issue has been raised on their github page and later added to their documents.
Below is the copy&paste from their doc,
registering icons
import { registerIcons } from '#uifabric/styling';
import Icon from '#fortawesome/react-fontawesome';
registerIcons({
icons: {
'Home': <Icon icon={['fal', 'home']} />,
'HomeSolid': <Icon icon={['fas', 'home']} />,
}
});
Using it
import { Button } from 'office-ui-fabric-react/lib/Button';
const IconTest = () => <Button iconProps={{ iconName: 'HomeSolid' }} />