simondavies · August 13, 2021 11:36
diff --git a/ReactJS-app.js b/ReactJS-app.js
 import React from 'react'
 import Main from './components/main'

 React.render(<Main></Main>, document.getElementById('app'))
diff --git a/ReactJS-Cookie.js b/ReactJS-Cookie.js
 'use strict'

 import React from 'react'
 import cx from 'classnames' /** you need to npm install --save-dev classnames this **/
 /**
 * ReactJS & ES2015 Cookies Pop Up Component
 *  A pop up to inform the user that cookies are used on a/this site.
 *
 * Usage: <Cookies />
 *
 * you cal also override the message and the expiry time:
 * <Cookies message="ADD MESSAGE HERE" expires={ADD EXPIRY VALUE HERE}/>
 *
 * @param message {string} optionl prop type
 * @param expires {number} optionl prop type
 *
 * @author Simon Davies
 * @module components/Cookies
 */
 export default class Cookies extends React.Component{
  constructor(){
    super();

    this.state = {
      cookieName : 'cookiePopup',
      message : 'We use cookies to ensure that we give you the best experience on our website. By selecting to close this alert, you are agreeing to allowing this site to use 3rd party cookies.',
      expiresIn : 365,
      cookieSet : false
    }
  }
  /**
   * check for the cookie on init/mounting
   */
  componentWillMount(){
    //-- lets overright several settings with any props that are set externally
    if (this.props.message) this.setState({message: this.props.message});
    if (this.props.expires) this.setState({expiresIn: this.props.expires});
    //-- now check for the cookie
    this._checkCookie();
  }
  /**
   * Close the pop up message on click event action
   */
  closeMessage(evt){
    evt.preventDefault();
    this.setState({cookieSet : true})
  }
  /**
   * main reactjs render method
   * @return {object}
   */
  render(){
    /**
     * enable the setting of the visual class(s)
     */
    var classes = cx({
      'cookies-wrapper': true,
      'dismiss': this.state.cookieSet,
    });

    return (
      <div className={classes}>
        <div className="cookies-message">{this.state.message}</div>
        <div className="button-wrapper">
          <button id="close-button" type="button" onClick={this.closeMessage.bind(this)}>&times;</button>
        </div>
      </div>
    )
  }

  /**
   * check for a existing cookie
   */
  _checkCookie() {
    //-- get the required cookie
    let cookie = this._getCookie();
    //-- check if we do have a cookie already set
    if (cookie !=="") {this.setState({cookieSet : true}); return;}
    //-- if not lets display message and set it
    this._setCookie();
  }
  /**
   * set the cookie
   */
  _setCookie() {
    var d = new Date(),
        cvalue = this._setCookieValue();
    d.setTime(d.getTime() + (this.state.expiresIn*24*60*60*1000));
    let expires = "expires="+d.toUTCString();
    document.cookie = this.state.cookieName + "=" + cvalue + "; " + expires;
  }
  /**
   * set the cookie value
   * @return {string}
   */
  _setCookieValue() {
    var a = () => { return (((1 + Math.random()) * 65536) | 0).toString(16).substring(1)};
    return (a() + a() + "-" + a() + "-" + a() + a() + a())
  }
  /**
   * get the cookies and searh for ours
   * @return {string}
   */
  _getCookie() {
    var name = this.state.cookieName + "=";
    var ca = document.cookie.split(';');
    for(let i=0; i<ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1);
        if (c.indexOf(name) == 0) return c.substring(name.length,c.length);
    }
    return "";
  }

 }

 Cookies.propTypes  = {
  message : React.PropTypes.string,
  expires : React.PropTypes.number,
 }
diff --git a/ReactJS-index.html b/ReactJS-index.html
 <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>
diff --git a/ReactJS-Main.js b/ReactJS-Main.js
 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>
    )
  }
 }
	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>
	)
	}
	}