<div id="app">
  
</div>
body{
  height:100vh;
  background:yellowgreen;
}
.box{
  width:100px;
  height:100px;
  border:3px solid rgba(255,0,0,.5);
  box-shadow:10px 5px 0 0 rgba(0,0,0,.5);
  background:transparent;
}
function App(){
  const [value,changeValue] = React.useState(0)
  const boxShadow = React.useMemo(()=>{
    return {
      'box-shadow':`10px 5px ${value}px 0 rgba(0,0,0,.5)`
    }
  },[value])
  const onChange = (e)=>{
    changeValue(e.target.value)
  }
  return (
    <div>
      <div style={boxShadow} className="box"></div>
      <input type="range" value={value} onChange={onChange} min="0" max="10"/>
    </div>
  )
}

ReactDOM.render(<App/>,document.getElementById('app'))
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/react/16.9.0/umd/react.production.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.production.min.js