React Container form shadow components

Getting Started

npm install react-shadow-portal

Requires react@^16.13.1, and react-dom@^16.13.1 as a peer dependency.

Usage

import React,  { useState, useEffect, useRef }  from  "react";
import PropTypes from  "prop-types";
import ShadowContainer from  "react-shadow-portal";

const  Timer  =  ({  onUpdate,  name  })  =>  {
	const  [time, setTime]  =  useState(new Date());
	useEffect(()  =>  {
		const interval =  setInterval(()  =>  {
		setTime(new Date());
		},  1000);
		return  ()  =>  clearInterval(interval);
	});
	
	return (
	// ShadowContainer.[html-tag]
	<ShadowContainer.section>
		<link  rel="stylesheet"  href={path/to/styles}></link>
		<div  className="timer">
			<span  className="timer__value">
				{time.toLocaleTimeString()}
			</span>
			<button  
				type="button"  
				className="timer__btn"  
				onClick={onClick}>
					Update
			</button>
		</div>

	</ShadowContainer.section>
	);
};

  

Timer.protoTypes =  {
	onUpdate: PropTypes.func,
	name: PropTypes.string,
};

  

Timer.defaultProps =  {
	onUpdate:  ()  =>  {},
	name:  "",
};

export  default Timer;