Create a gist now

Instantly share code, notes, and snippets.

Embed
What would you like to do?
A React JS & ES2015 Cookies pop up component and example files
import React from 'react'
import Main from './components/main'
React.render(<Main></Main>, document.getElementById('app'))
<html>
<head>
<title>Laravel</title>
<link href='//fonts.googleapis.com/css?family=Lato:100' rel='stylesheet' type='text/css'>
<style>
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
color: #444;
display: table;
font-weight: 100;
font-family: 'Lato';
}
.container {
text-align: center;
display: table-cell;
vertical-align: middle;
}
.content {
text-align: center;
display: inline-block;
}
.cookies-wrapper {
position: fixed;
z-index: 4000;
bottom: 0;
left: 0;
right: 0;
height: auto;
width: 100%;
display: table;
background: rgba(0,0,0,.5);
-webkit-transition: opacity 300ms ease;
-moz-transition: opacity 300ms ease;
-o-transition: opacity 300ms ease;
transition: opacity 300ms ease;
}
.cookies-wrapper.hide {display: none;}
.cookies-wrapper.dismiss {opacity: 0;}
.cookies-wrapper .cookies-message {
margin: 0;
padding: 15px 10px;
display: table-cell;
vertical-align: middle;
font-size: 13px;
font-family: sans-serif;
color: white;
text-align: left;
width: 93%;
}
.cookies-wrapper .button-wrapper {
margin: 0;
padding: 0;
display: table-cell;
vertical-align: middle;
width: 6%;
pointer-events: auto;
}
.cookies-wrapper .button-wrapper button {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
border: 0;
border-radius: 0;
font-size: 20px;
font-family: sans-serif;
font-weight: 700;
color: white;
background: transparent;
border-left: 1px rgba(0,0,0,.2) solid;
cursor: pointer;
outline: none;
-webkit-transition: background 300ms ease;
-moz-transition: background 300ms ease;
-o-transition: background 300ms ease;
transition: background 300ms ease;
}
.cookies-wrapper .button-wrapper button:hover {
background: rgba(0,0,0,.8);
}
@media (max-width: 800px) {
.cookies-wrapper .cookies-message {width: 90%; font-size: 11px}
.cookies-wrapper .button-wrapper{width: 10%}
}
@media (max-width: 400px) {
.cookies-wrapper .cookies-message {width: 86%}
.cookies-wrapper .button-wrapper{width: 13%}
}
</style>
</head>
<body>
<div class="container">
<div id="app">
</div>
</div>
<script src="js/bundle.js"></script>
</body>
</html>
import React from 'react'
import Cookies from './cookies'
export default class Main extends React.Component{
constructor(){
super()
}
render (){
return(
<div>
This is the main compnent content.
<Cookies />
</div>
)
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment