I work on react project and use emotion library for styling inside .js file. Syntax highlighting in #emotion/styled works with no issue, but css function from #emotion/react causes some sort of syntax highlighting bug. Can someone tell me how to solve the issue?
import React from "react";
import { Link } from "react-router-dom";
import { css } from "#emotion/react";
import Layout from "../components/Layout";
import Heading from "../components/atoms/Heading";
import Paragraph from "../components/atoms/Paragraph";
import Button from "../components/atoms/Button";
export default function Home() {
return (
<Layout
pageTitle="Home"
css={css`
display: flex;
`}
>
<Heading>HaxBall Clone</Heading>
<Paragraph>
HaxBall clone made with react and pixi.js.
<br />
Original game:{" "}
<a href="https://haxball.com" target="_blank" rel="noreferrer">
HaxBall.com
</a>
</Paragraph>
<Button as={Link} to="/enter-user">
Play!
</Button>
</Layout>
);
}
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'));
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 the window-close icon in my react app. https://fontawesome.com/icons/window-close?style=regular
It's not showing up and the class list says: fa fa-undefined fa-2x so something must not be working right.
My component is pretty small so it's not a lot of code.
Details component:
import React from 'react';
import FontAwesome from 'react-fontawesome';
import { faWindowClose } from '#fortawesome/free-regular-svg-icons';
const Details = (props) => {
const className =
'col details-col' + (props.showDetails ? '' : ' d-none');
return (
<div className={className}>
<FontAwesome icon={faWindowClose} size={'2x'} />
<h3 className={'text-center title details-title'}>
Order Details
</h3>
<h4>{props.activeOrder.title}</h4>
</div>
);
};
export default Details;
Here is the full rendered HTML:
<span icon="[object Object]" aria-hidden="true" class="fa fa-undefined fa-2x"></span>
I guess I was importing the wrong fontawesome library. I removed import FontAwesome from 'react-fontawesome'; from my imports. I added import { FontAwesomeIcon } from '#fortawesome/react-fontawesome'; to my imports after installing it and it worked beautifully!
As requested by brooksrelyt, I followed the excellent tutorial here: https://scotch.io/tutorials/using-font-awesome-5-with-react
I have problems importing UI libraries, I had problem with ant design library so I decided to try different one, now I have problem importing Grommet.
What am I doing wrong? I added dependencies according documentation and added examples included in documentation yet still not working.
I am trying to execute this code from documentation
But it doesn't look the same at all
I work with codesandbox.io, here is link for the code on it
import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";
import Heading from "grommet/components/Heading";
import Box from "grommet/components/Box";
import Header from "grommet/components/Header";
import Title from "grommet/components/Title";
import Search from "grommet/components/Search";
import Menu from "grommet/components/Menu";
import Anchor from "grommet/components/Anchor";
import "grommet-css";
class HelloWorldApp extends React.Component {
render() {
return (
<div>
<Header>
<Title>Sample Title</Title>
<Box flex={true} justify="end" direction="row" responsive={false}>
<Search
inline={true}
fill={true}
size="medium"
placeHolder="Search"
dropAlign={{right: "right"}}
/>
<Menu dropAlign={{right: "right"}}>
<Anchor href="#" className="active">
First
</Anchor>
<Anchor href="#">Second</Anchor>
<Anchor href="#">Third</Anchor>
</Menu>
</Box>
</Header>
<Box>
<Heading>
Hello, I'm a Grommet Component styled with
grommet-css
</Heading>
</Box>
</div>
);
}
}
var element = document.getElementById("root");
ReactDOM.render(<HelloWorldApp />, element);
So according to your code:
<Menu dropAlign={{right: "right"}}>
was missing the icon attribute, without which the Menu component directly renders the Anchor, the menu-items component.
add import for the icon of your choosing, i.e: Actions ( from the example )
import Actions from 'grommet/components/icons/base/Actions';
add the icon attribute to the Menu component:
<Menu
icon={<Actions />}
dropAlign={{ right: 'right' }}
>
<Anchor href="#" className="active">First</Anchor>
<Anchor href="#">Second</Anchor>
<Anchor href="#">Third</Anchor>
</Menu>
here's a codesandbox.io link which fixes your issue:
https://codesandbox.io/s/237xo7y48p
I develop react + meteor app, then I got error like this,
I try to add navigation https://react-bootstrap.github.io/components.html#navigation, get data in this tutorial . I try to add this const like below way
MainComponent
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Meteor } from 'meteor/meteor';
import { createContainer } from 'meteor/react-meteor-data';
import { Button } from 'react-bootstrap';
import AccountsUIWrapper from './AccountsUIWrapper.jsx';
// App component - represents the whole app
export default class Home extends Component {
constructor(props) {
super(props);
this.state = {
hideCompleted: false,
};
}
render() {
const navbarInstance = (
<Navbar>
<Navbar.Header>
<Navbar.Brand>
React-Bootstrap
</Navbar.Brand>
</Navbar.Header>
<Nav>
<NavItem eventKey={1} href="#">Link</NavItem>
<NavItem eventKey={2} href="#">Link</NavItem>
<NavDropdown eventKey={3} title="Dropdown" id="basic-nav-dropdown">
<MenuItem eventKey={3.1}>Action</MenuItem>
<MenuItem eventKey={3.2}>Another action</MenuItem>
<MenuItem eventKey={3.3}>Something else here</MenuItem>
<MenuItem divider />
<MenuItem eventKey={3.4}>Separated link</MenuItem>
</NavDropdown>
</Nav>
</Navbar>
);
return (
<div>
{navbarInstance}
<div className="container">
<div className="row">
<div className="navbar nav-inline">
<AccountsUIWrapper />
</div>
</div>
<header>
<h1>School Attendance</h1>
<h3>Lecturer Report</h3>
</header>
<h4>This is home</h4>
</div>
</div>
);
}
}
but I got bellow error. and there reason as like me.
There add some import
import { Button, Navbar, Nav, NavItem, NavDropdown, MenuItem } from 'react-bootstrap';
like this then vanish the error, but I got like this
I want to correct way to Navbar add
The classes you call in render are not defined.
Where you have import {Button} from 'react-bootstrap' you need to import every component that you plan on using in your file ( that is part of that framework ).
The solution would be adding Navbar, like so:
import { Button, Navbar } from 'react-bootstrap'
Also have you included Bootstrap styles in your project?
https://react-bootstrap.github.io/getting-started/introduction
firstly install react bootstrap
npm install react-bootstrap bootstrap
// or use yarn
yarn add react-bootstrap bootstrap
also you need to import Navbar as well you can use this code
import Navbar from 'react-bootstrap/Navbar'
// or
import { Navbar } from 'react-bootstrap'
for the styling you need to add bootstrap styles. How and which Bootstrap styles you include is up to you, but the simplest way is to include the latest styles from the CDN.
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
crossorigin="anonymous"
/>