How to convert from TSX to JSX in this Codesandbox - reactjs

I am learning React and JavaScript and now I have this CodeSandbox but I can't convert it to JavaScript React I have tried this for the Card Component:
import React, { useState } from "react";
const Card = props => {
const [expanded, setExpanded] = useState(false);
const RenderCard = (className) => {
return (
<div
className={`card ${className}${expanded ? " expanded" : ""}`}
onClick={() => {
setExpanded(!expanded);
}}
>
<div className="image">
<img alt="digger" src={props.image} />
</div>
<div className="info">
<div
className="bg1"
style={{ backgroundImage: "url('" + props.image + "')" }}
/>
<div
className="bg2"
style={{ backgroundImage: "url('" + props.image + "')" }}
/>
<div
className="bg3"
style={{ backgroundImage: "url('" + props.image + "')" }}
/>
<h1>JCB OES System</h1>
<h2>Report Number #1</h2>
<h3>Load lifter work area</h3>
<div className="button">Open</div>
</div>
</div>
);
};
return (
<div className={`card-container${expanded ? " expanded" : ""}`}>
{expanded && <div className="background" />}
{<RenderCard className="card1"/>}
{<RenderCard className="card2"/>}
</div>
);
};
export default Card;
And I show the Card like this. It's very simple, it's just that when I click a card it does not pop up like the CodeSandbox does.
import Card from "./Card";
import "./styles.scss";
const CreateContent = () => {
return (
<div className="app">
<link rel="stylesheet" href="https://use.typekit.net/jli8mqj.css" />
<Card image="https://www.thetimes.co.uk/imageserver/image/methode%2Fsundaytimes%2Fprodmigration%2Fweb%2Fbin%2Fbeae8dfb-0a41-4f8e-b076-ffd68417287b.jpg?crop=1024%2C683%2C0%2C0&resize=685" />
<Card image="https://www.virginexperiencedays.co.uk/content/img/product/large/PJCBRA__01.jpg" />
<Card image="https://www.toyfarmers.co.uk/images/britains-jcb-3cx-backhoe-loader.jpg" />
<Card image="https://seatylive.blob.core.windows.net/eventimages/2019-Aug-20-Tue_18-37-31-969.png" />
</div>
);
};
export default CreateContent;
The styles is the same, with no changes: I understand that the expanded background when set to expanded=true using the hook that the scss style for background should be in effect but all I get is a black screen.
.app {
font-family: sans-serif;
text-align: center;
padding: 4em 0;
}
* {
box-sizing: border-box;
padding: 0;
margin: 0;
border: 0;
}
.card-container {
font-family: niveau-grotesk, sans-serif !important;
position: relative;
z-index: 0;
&.expanded {
z-index: 3;
#keyframes fade-in {
0% { opacity: 0; }
100% { opacity: 1; }
}
.background {
animation: fade-in .3s ease-out;
z-index: 2;
position: fixed;
background: black;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
}
}
.card {
margin: 0 auto;
width: 25em;
cursor: pointer;
border-radius: .5em;
box-shadow: 0 50px 100px -20px rgba(50,50,93,.25),
0 30px 60px -30px rgba(0,0,0,.3),
0 -18px 60px -10px rgba(0,0,0,.03);
margin-bottom: 4em;
&.card2 {
transition: .2s ease-out;
position: absolute;
top: 0;
width: 25em;
left: 50%;
z-index: 4;
transform: translateX(-50%);
&.expanded {
width: 40em;
}
}
.image {
img {
display: block;
border-top-left-radius: .5em;
border-top-right-radius: .5em;
width: 100%;
}
}
$button-color: rgb(87, 87, 228);
&:hover {
.info .button {
color: white;
background: $button-color;
}
}
.info {
background: white;
position: relative;
border-bottom-left-radius: .5em;
border-bottom-right-radius: .5em;
overflow: hidden;
padding: .9em 1.2em;
text-align: left;
$darkness: 0;
&:after {
content: '';
position: absolute;
top: -20%;
left: -20%;
right: -20%;
bottom: -20%;
height: 140%;
width: 140%;
// filter: blur(8px);
// -webkit-filter: blur(8px);
background: linear-gradient(to right,
rgba(0, 0, 0, 0.4) 30%,
rgba(0, 0, 0, 0) 100%);
}
.bg1, .bg2 {
position: absolute;
top: -20%;
left: -20%;
right: -20%;
bottom: -20%;
height: 140%;
width: 140%;
z-index: 0;
background-position: center;
background-repeat: no-repeat;
background-size: 100%;
transform: rotate(180deg);
filter: blur(16px);
}
.bg2 {
background-position: bottom;
transform: rotate(0deg);
opacity:0.4;
}
.bg3 {
background-position: top;
transform: rotate(180deg);
opacity:0.4;
}
.button {
transition: .2s ease-out;
text-transform: uppercase;
line-height: 1.2em;
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 1.8em;
z-index: 1;
background: white;
border-radius: 1em;
padding: .4em 1.1em;
font-weight: 600;
color: $button-color;
}
h1, h2, h3 {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
max-width: 13em;
color: white;
position: relative;
z-index: 1;
text-shadow: 1px 1px 1px rgba(0,0,0,0.8);
}
h1 {
line-height: .8em;
letter-spacing: .03em;
font-size: 1.1em;
font-weight: 900;
padding: .1em 0;
}
h2 {
letter-spacing: .02em;
font-size: 1.0em;
font-weight: 400;
padding: .1em 0;
opacity: 0.6;
}
h3 {
letter-spacing: .02em;
font-size: .9em;
font-weight: 400;
padding: .1em 0;
}
}
}
}
What am I missing?

To swap your Code Sandbox from TypeScript to JavaScript you should just need to:
Remove all typescript specific syntax from your ".ts" and ".tsx" files (interfaces, typings, etc)
Change all the file extensions to their JavaScript equivalent i.e. ".ts" -> ".js" and ".tsx" -> ".jsx".
Update the "main" property of the "package.json" file to point to the renamed entry point. i.e. "src/index.jsx".
I created a quick CodeSandbox with this already done.

Related

Animation react Does not reset

I am working on animation in React app. I need animation starts working after hover off the button, the animation only works one time and after that for next time hover off the button does not make animation works.
I used
setTimeout(()=> {
e.target.classList.add(classes.hide);
}, 1);
to reset time to works again but it does not work out.
#keyframes rotate-before {
0% { right:0px; top:0px;}
25% { right:40px; top:0px;}
50% {bottom:10px; top:178px;right:40px;}
}
.content {
position: absolute;
inset: 30px;
z-index: 3;
display: flex;
flex-direction:column;
align-items: center;
justify-content: center;
}
.content:hover .button{
padding: .8rem .1rem;
background-color: #00092C;
border:none;
border-radius: 50%;
cursor: pointer;
color: #fff;
visibility:visible;
position: relative;
}
.hover{
padding: .8rem .1rem;
background-color: #00092C;
border:none;
border-radius: 50%;
cursor: pointer;
color: #fff;
visibility:visible;
position: relative;
animation: rotate-before 0.5s linear;
animation-iteration-count: 1;
}
.content .button{
padding: .8rem .1rem;
background-color: #00092C;
border:none;
border-radius: 50%;
cursor: pointer;
color: #fff;
position: relative;
visibility:hidden;
}
.hide{
padding: .8rem .1rem;
background-color: #00092C;
border:none;
border-radius: 50%;
cursor: pointer;
color: #fff;
position: relative;
visibility:hidden;
}
.content img {
position: absolute;
width: 100%;
height:100%;
object-fit: cover;
}
import "./App.css";
import { AnimatePresence, motion, useTransform } from "framer-motion/dist/framer-motion";
import classes from "./components/anm.module.css";
function App() {
const [isHovered, setHovered] = useState(false);
const change = (e) => {
e.target.classList.add(classes.hover);
setTimeout(()=> {
e.target.classList.add(classes.hide);
}, 1);
};
return (
<div className={classes.box}>
<div className={classes.content}>
<img
src="https://budgetreno.ca/wp-content/uploads/Pylon-25_compressed-thegem-portfolio-metro.jpg"
alt=""
/>
<motion.div className="square" onHoverEnd={change} whileHover={{}}>
<button id="test" className={classes.button}>
Follow
</button>
</motion.div>
</div>
</div>
);
}
export default App;

How to make react slick carousel resizable when I zoom out?

So like the title says, what I am trying to achieve is that when I zoom out, I want my carousel to be 100% width of the screen all time, here is what I mean by that. Right now when I zoom out, my carousel looks like this:
But when it is 100% zoom, a.k.a my normal screen it looks like this:
So, how do I make this be resizable meaning it is going to be like it is on a normal screen (100%) on every zoom.
Here is my code:
const Works = () => {
var settings = {
centerMode: true,
dots: true,
infinite: true,
speed: 500,
slidesToShow: 4,
slidesToScroll: 1,
centerPadding: "10px",
customPaging: (i) => <div className="works-dots"></div>,
arrows: false,
};
return (
<div className="mainWorks-container">
<div className="works-popup-container">
<h3 className="works-title">WORKS</h3>
<div className="works-popup-image-container">
<Slider {...settings}>
{worksImages.map((image, index) => {
return (
<div key={index} className="works-image">
<img
src={image.image}
alt={image.alt}
className="works-popup-image"
/>
<div className="image-overlay">
<h3>{image.title}</h3>
</div>
</div>
);
})}
</Slider>
</div>
</div>
<div className="works-button-container">
<a href="/">
<Button text="View Works" isFilled={false} type="border" />
</a>
</div>
</div>
);
};
export default Works;
This is my Works.js component.
.mainWorks-container {
height: 675px;
position: relative;
}
.works-popup-container {
height: 780px;
width: 986px;
background: url("../../../images/gradient-background.jpg") no-repeat;
background-size: cover;
position: absolute;
top: 10%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 10px;
}
.works-title {
margin-top: 50px;
letter-spacing: 0.5em;
font-size: 12px;
color: white;
text-align: center;
}
.works-popup-image-container {
.slick-list {
position: relative;
left: -30%;
width: 105rem;
}
.works-image {
position: relative;
margin-bottom: 8rem;
width: 385px;
height: 513px;
border-radius: 3px;
box-shadow: 0px 70px 100px -40px rgba(0, 0, 0, 0.5);
img {
width: 385px;
height: 100%;
object-fit: contain;
cursor: pointer;
}
.image-overlay {
position: absolute;
top: 0;
left: 0;
width: 91.7%;
background: rgba(0, 0, 0, 0.5);
height: 100%;
display: flex;
justify-content: center;
align-items: center;
color: white;
opacity: 0;
cursor: pointer;
text-align: center;
font-size: 1.2rem;
word-break: break-word;
}
.image-overlay:hover {
opacity: 1;
}
}
}
.works-dots {
background: rgba(247, 247, 247, 0.75);
border-radius: 50%;
width: 8px;
height: 8px;
margin: 0 5px;
}
.works-dots:hover {
height: 10px;
width: 10px;
transition: all 0.2s ease;
}
.slick-active {
.works-dots {
height: 10px;
width: 10px;
}
}
.works-button-container {
position: absolute;
top: 90%;
left: 50%;
transform: translate(-50%, -50%);
}
And this is my worksStyles.scss file.
If anyone knows how to do this, I would be thankful.

How to change background color with toggle button in React?

In Weather project, I have toggle button for Day/Night mode. When toggled it should change background color but it fills the entire page above the components which isn't desirable. Is there any appropriate solution?
Below is the reference
DayNightMode.js
const DayNightMode = () => {
return (
<div className="switch-box">
<div className="switch">
<label for="toggle">
<input id="toggle" className="toggle-switch" type="checkbox" />
<div className="sun-moon">
<div className="dots">
</div>
</div>
<div className="background">
<div className="stars1"></div>
<div className="stars2"></div>
</div>
<div className="fill"></div>
</label>
</div>
</div>
);
};
export default DayNightMode;
DayNightMode.css
* {
box-sizing: border-box;
}
.switch-box {
margin-left: 30%;
/* margin-top: -5%; */
}
.container {
/* height: calc(100% - 2.5rem); */
/* background: #f4f4f4; */
/* display: flex; */
/* justify-content: center; */
/* align-items: center;*/
}
.switch {
position: relative;
/* overflow: hidden; */
width: 8.6rem;
/* height: 2rem; */
}
.switch input {
position: absolute;
top: 0;
left: 0;
z-index: 2;
opacity: 0;
}
.switch label {
cursor: pointer;
}
.background {
z-index: 1;
position: absolute;
width: 6.5rem;
height: 1.8rem;
border-radius: 2.5rem;
border: 0.25rem solid #202020;
background: linear-gradient(to right, #484848 0%, #202020 100%);
transition: all 0.3s;
margin-top: -22px;
opacity: 0.8;
}
.fill {
/* background: #484848;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0; */
}
.switch input:checked ~ .fill {
background: #e9f8fd;
}
/* .fill {
position: fixed;
top: 0;
right: 0;
bottom: 2rem;
left: 0;
background: #484848;
transition: 0.75s all ease;
} */
/* .switch input:checked ~ .fill {
background: #E9F8FD;
} */
/* Stars */
.stars1,
.stars2 {
position: absolute;
height: 0.3rem;
width: 0.3rem;
background: #ffffff;
border-radius: 50%;
transition: 0.3s all ease;
}
.stars1 {
top: 2px;
right: 20px;
}
.stars2 {
top: 20px;
right: 35px;
}
.stars1:after,
.stars1:before,
.stars2:after,
.stars2:before {
position: absolute;
content: "";
display: block;
height: 0.25rem;
width: 0.25rem;
background: #ffffff;
border-radius: 50%;
transition: 0.2s all ease;
}
.stars1:after {
top: 2px;
right: 20px;
}
.stars1:before {
top: 12px;
right: -12px;
}
.stars2:after {
top: -20px;
right: -20px;
}
.stars2:before {
top: -24px;
right: -30px;
}
.sun-moon {
z-index: 2;
position: absolute;
left: 0;
display: inline-block;
height: 1.5rem;
width: 1.5rem;
margin: 0.12rem;
background: #fffdf2;
border-radius: 50%;
transition: all 0.5s ease;
margin-top: -20.5px;
/* Default to Moon */
border: 0.2rem solid #dee2c6;
}
.sun-moon .dots {
position: absolute;
top: 0.5px;
left: 42px;
height: 0.2rem;
width: 0.2rem;
background: #efeedb;
border: 0.25rem solid #dee2c6;
border-radius: 50%;
transition: 0.4s all ease;
}
.sun-moon .dots:after,
.sun-moon .dots:before {
position: absolute;
content: "";
display: block;
height: 0.25rem;
width: 0.25rem;
background: #efeedb;
border: 0.25rem solid #dee2c6;
border-radius: 50%;
transition: 0.4s all ease;
}
.sun-moon .dots:after {
top: -8px;
left: -26px;
}
.sun-moon .dots:before {
top: 10px;
left: -10px;
}
/* Transition to Sun */
.switch input:checked ~ .sun-moon {
left: calc(100% - 4rem);
background: #f5ec59;
border-color: #e7c65c;
transform: rotate(-25deg);
}
.switch input:checked ~ .sun-moon .dots,
.switch input:checked ~ .sun-moon .dots:after,
.switch input:checked ~ .sun-moon .dots:before {
background: #ffffff;
border-color: #ffffff;
}
.switch input:checked ~ .sun-moon .dots {
height: 1.2rem;
width: 1.2rem;
top: -10px;
left: -20px;
transform: rotate(25deg);
}
.switch input:checked ~ .sun-moon .dots:after {
height: 0.65rem;
width: 0.65rem;
top: 2px;
left: -12px;
}
.switch input:checked ~ .sun-moon .dots:before {
height: 0.4rem;
width: 0.4rem;
top: 6px;
left: 14px;
}
.switch input:checked ~ .background .stars1,
.switch input:checked ~ .background .stars2 {
opacity: 0;
transform: translateY(2rem);
}
.switch input:checked ~ .background {
border: 0.25rem solid #78c1d5;
background: linear-gradient(to right, #78c1d5 0%, #bbe7f5 100%);
}
Form.js (DayNight Toggle button defined here)
import React from 'react'
import { ArrowTooltip } from './ArrowTooltip'
import gps from '../images/gps.png'
import 'react-toastify/dist/ReactToastify.css';
import Autosuggest from 'react-autosuggest';
import { highlight } from './Helper'
import cities from 'cities.json';
import Button from 'react-bootstrap/Button'
import './Form.css';
import { MDBContainer,
MDBRow,
MDBCol,
MDBCard,
MDBCardBody,
MDBCardHeader,
MDBBtn} from 'mdbreact'
import DayNightMode from './DayNightMode';
class Form extends React.Component {
constructor(props) {
super(props);
this.state = {
value: '',
suggestions: [],
newsValue: '',
weatherValue: ''
};
}
onChange = (event, { newValue}) => {
this.setState({
value: newValue,
});
};
render(){
return (
<div>
<MDBContainer style={{height: '480px', marginTop: '25px'}}>
<MDBRow>
<MDBCol>
<MDBCard style={sectionStyle}></MDBCard>
<MDBCard style={{zIndex:'1', background: 'none'}}>
<MDBCardBody>
{/* Here Toggle button is defined */}
<DayNightMode/>
<form>
<div width="100%">
<ArrowTooltip title="Track Location" placement="top">
<span style={{width:'10%', display:'inline-block', cursor:'pointer'}}
onClick={this.props.fetchWeather}>
<img src={gps} width="25px" height="25px" />
</span>
</ArrowTooltip>
</div>
<br/>
<div className="text-center mt-4">
<Button variant="info"
className="mb-3 btn-block"
type="submit"
value={inputProps.value}
onClick={e => this.onClick(e)}
style={{background: '#e0f7fa', opacity:'0.6',
borderRadius: '10px',fontFamily: 'Josefin Sans',
boxShadow: '0 8px 6px -6px black'}}
>Search Weather</Button>
</div>
</form>
</MDBCardBody>
</MDBCard>
</MDBCol>
</MDBRow>
</MDBContainer>
</div>
)
}
}
export default Form;
App.js (Parent File)
import React from "react";
import "./App.css";
import Form from "./components/Form";
import { ToastContainer, toast, Bounce } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";
import WeatherAndNews from "./components/WeatherAndNews";
import moment from "moment-timezone";
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
isLoading: true,
newsValue: "",
weatherValue: ""
};
}
handleNews = async (data) => {
this.setState({
newsValue: data
});
};
handleWeather = async (data) => {
this.setState({
weatherValue: data
});
};
render() {
return (
<React.Fragment>
<div className="main-container">
<div className="form-container">
<Form
newsValue={this.state.newsValue}
weatherValue={this.state.weatherValue}
/>
<ToastContainer transition={Bounce} className="toast-background" />
</div>
<div className="body-container">
<WeatherAndNews />
</div>
</div>
</React.Fragment>
);
}
}
export default App;
My intention is that background color of the page should be changed on toggle
Following is the Codesandbox link https://codesandbox.io/s/2huux
Steps you need to do to achieve this:
Create a variable named 'isDayMode' in App.js component
Create a function with the name 'handleDayNightToggle' in App.js which can update that value to true or false on the basis of the checkbox selected
Pass the reference of the function as props to the Form component
Again pass the reference of function 'handleDayNightToggle' from Form to DayNightMode component
There create an onClick function for the checkbox and make it call the 'handleDayNightToggle' passed as props. So any time the checkbox is clicked this function calls the 'handleDayNightToggle' of the App component.
Finally use the flag 'isDayMode' in App component to understand whether the day is selected or night and accordingly change the classes to update background color.
Updated your project with the above steps, take a look into it - https://codesandbox.io/s/async-cache-r1poy

How to Use Classes in Styled-Component

I am new to styled-component. I want to convert custom CSS to Styled-Component. I have already used className in React File.
App.js
<div className="left-menus">
{menus.map(item => {
return (
<Link to={item.name} name={item.name} key={item.name}
className={this.state.activeMenu === item.name ? 'menu active' : 'menu' }
onClick={() => this.setState({ activeMenu: item.name })}
>
<Icon name={item.icon} size="large"/>
<span>{item.name}</span>
</Link>
)
})}
</div>
App.css
.left-menus {
position: fixed;
width: 200px;
padding-right: 0 !important;
background-color: #fff;
height: 100%;
margin-top: 20px;
top: 47px;
font-size: 12px !important;
border-right: 2px solid #e8e8ec; }
.left-menus .menu {
color: #4a4a4a;
width: 100%;
display: block;
cursor: pointer;
text-transform: capitalize !important;
padding: 15px 10px 15px 18px; }
.left-menus .menu .angle.down.icon,
.left-menus .menu .angle.up.icon {
right: 10px;
position: absolute; }
.left-menus .menu .icon:first-child {
margin-right: 10px; }
.left-menus .menu.active {
border-right: 4px solid #3cbfc8;
background-color: #f8f8f8; }
.left-menus .sub-menu-container .sub-menu {
display: none;
height: 0;
transition: 0.3s all ease; }
.left-menus .sub-menu-container.active .sub-menu {
display: block;
height: 100%;
text-transform: capitalize;
transition: 0.3s all ease; }
.left-menus .sub-menu-container.active .sub-menu a {
color: #4a4a4a; }
.left-menus .sub-menu-container.active .sub-menu .icon {
margin: 10px 10px 0 10px; }
CSS with a class selector will only match elements that are members of a class.
To give a styled component that class, you need to do it when you instantiate it.
For example:
const MyStyledComponent = styled.div`
background: red;
`;
const myFunctionComponent = () => {
const myClass = "left-menus";
return(
<div>
Here is MyStyledComponent
<MyStyledComponent className={myClass}>
Example
</MyStyledComponent>
</div>
);
}
If you have an existing stylesheet you want to apply, it is likely that styled components are not the right tool for the job.

React-Select, Multi Select and Text Overflow

I am using React-Select component with multi select. One of the problems I am facing is that if the user select 3 or 4 options the UI looks pretty bad because the text begins to overflow and that causes the component to grow either horizontally and vertically.
I want to have a behavior where the size of the component remains the same and if the user selects more options then it just shows "..." (ellipsis) rather than try to show the newly selected options.
The behavior I want is more inline with this component
http://instructure-react.github.io/react-select-box/
See how it handles multi-select.
I don't want to swap out components now because we have done lots of testing with React-Select.
Can you give me some guide lines on how to achieve this without removing react-select.
i've managed to achieve both the ellipsis effect and leaving the display at one row,
here is a working example
https://codesandbox.io/s/v638kx67w7
hope this helps
I solved this without losing the Input component like this;
import Select, { components as RSComponents } from "react-select";
const ValueContainer = ({ selectProps, children, ...props }) => {
let [values, input] = children;
if (Array.isArray(values)) {
values = selectProps.value.map((x) => x.label).join(', ');
}
return (
<RSComponents.ValueContainer {...props}>
<div style={{
maxWidth: "80%",
whiteSpace: "nowrap",
textOverflow: "ellipsis",
overflow: "hidden",
}}>
{values}
</div>
{input}
</RSComponents.ValueContainer>
);
};
const customStyles = useMemo(() => ({
valueContainer: (provided, state) => ({
...provided,
whiteSpace: "nowrap",
overflow: "hidden",
flexWrap: 'nowrap',
}),
input: (provided, state) => ({
...provided,
minWidth: '20%'
}),
}), []);
<Select
components={{ ValueContainer }}
isMulti
styles={customStyles}
...
/>
This is the generated Html for given react-select element
. react-select-box-container {
position: relative;
width: 240px;
display: inline-block;
background-color: #fff;
border-radius: 4px;
text-align: left;
box-shadow: 0 0 2px rgba(0, 0, 0, .3);
}
.react-select-box {
padding: 15px 0;
display: inline-block;
cursor: pointer;
border: none;
width: 100%;
text-align: left;
background-color: transparent;
}
.react-select-box:focus {
outline: 0;
box-shadow: 0 0 4px #0493D1;
}
.react-select-box:before {
content: ' ';
z-index: 1;
position: absolute;
height: 20px;
top: 15px;
right: 34px;
border-left: 1px solid #CBD2D7;
}
.react-select-box:after {
content: ' ';
position: absolute;
z-index: 1;
top: 23px;
right: 13px;
border-top: 6px solid #7B8E9B;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
}
.react-select-box-label,
.react-select-box-option {
line-height: 16px;
font-size: 12px;
font-weight: bold;
color: #7B8E9B;
}
.react-select-box-label {
padding: 0 40px 0 20px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: #0493D1;
}
.react-select-box-empty .react-select-box-label {
color: #7B8E9B;
}
.react-select-box-click-outside-layer {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 2;
}
.react-select-box-clear {
position: absolute;
top: 15px;
right: 0;
width: 35px;
height: 20px;
background-color: #fff;
text-indent: -9999em;
z-index: 3;
border: none;
}
.react-select-box-clear:before {
content: '×';
position: absolute;
top: 2px;
left: 10px;
z-index: 1;
background-color: #7B8E9B;
border-radius: 100%;
font-size: 13px;
color: #fff;
line-height: 1;
width: 15px;
height: 15px;
text-indent: 0;
text-align: center;
}
.react-select-box-clear:hover,
.react-select-box-clear:focus {
outline: 0;
}
.react-select-box-clear:hover:before,
.react-select-box-clear:focus:before {
background-color: #0493D1;
}
.react-select-box-hidden {
display: none
}
.react-select-box-options {
margin: 2px 0 0;
position: absolute;
padding: 10px 0;
width: 240px;
top: 100%;
left: 0;
z-index: 4;
background-color: #fff;
border-radius: 4px;
box-shadow: 0 0 2px rgba(0, 0, 0, .3);
}
.react-select-box-options-list {
list-style: none outside;
margin: 0;
padding: 0;
}
.react-select-box-option {
padding: 10px 20px;
margin: 0;
cursor: pointer;
display: block;
line-height: 1.2;
text-decoration: none;
}
.react-select-box-option:hover {
color: #0493D1;
background-color: #f4f4f4;
}
.react-select-box-option-selected {
color: #CBD2D7;
}
.react-select-box-multi .react-select-box-option {
padding-left: 42px;
position: relative;
}
.react-select-box-multi .react-select-box-option:before {
content: ' ';
position: absolute;
line-height: 1;
text-align: center;
left: 20px;
top: 9px;
border-radius: 3px;
height: 12px;
width: 12px;
margin-right: 10px;
border: 1px solid #7B8E9B;
background: #f9f9f9;
vertical-align: middle;
}
.react-select-box-multi .react-select-box-option-selected:before {
content: '✓';
}
.react-select-box-multi .react-select-box-option-selected {
color: #1F3344;
}
.react-select-box-option:focus,
.react-select-box-option-focused {
color: #0493D1;
outline: 0;
background-color: #DDE2E5;
}
.react-select-box-close {
color: #0493D1;
text-transform: uppercase;
background-color: transparent;
border: none;
padding: 5px 0;
display: block;
text-align: center;
width: 100%;
font-weight: bold;
cursor: pointer;
outline: none;
}
.react-select-box-close:hover,
.react-select-box-close:focus {
text-decoration: underline;
}
.react-select-box-empty .react-select-box-close {
color: #CBD2D7;
}
.react-select-box-native {
position: absolute;
left: -99999em;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div class="react-select-box-container react-select-box-multi react-select-box-empty">
<button id="react-select-box-2" class="react-select-box" tabindex="0" aria-hidden="true">
<div class="react-select-box-label">
Favorite Colors
</div></button>
<div class="react-select-box-options react-select-box-hidden" aria-hidden="true" tabindex="0">
<div class="react-select-box-off-screen">
<a id="react-select-box-2-0" href="#" class="react-select-box-option" tabindex="-1">Red</a>
<a id="react-select-box-2-1" href="#" class="react-select-box-option" tabindex="-1">Green</a>
<a id="react-select-box-2-2" href="#" class="react-select-box-option" tabindex="-1">Blue</a>
</div>
<button class="react-select-box-close">Close</button>
</div>
<div class="react-select-box-native">
<label for="react-select-box-2-native-select">Favorite Colors</label>
<select id="react-select-box-2-native-select" multiple="multiple">
<option value="red">
Red
</option>
<option value="green">
Green
</option>
<option value="blue">
Blue
</option>
</select>
</div>
</div>

Resources