Why you are heavenly using document.querySelector and ref?
document.querySelector
ref
It should be like this and still be accessible.
import React, {useRef, useEffect} from "react"; import "./index.scss"; type SwitcherProps = { mode: string; themeSwitcher: Function; } // Getting state & action through props is first step for resuable components const DayNightSwitcher = ({ mode, themeSwitcher }: SwitcherProps) => { const checked = mode !== 'bright'; return( <> <div className={`react-toggle ${checked ? 'react-toggle--checked' : ''}`} onClick={themeSwitcher} > <div className="react-toggle-track"> <div className="react-toggle-track-check"> <span className="toggle_icon moon"></span> </div> <div className="react-toggle-track-x"> <span className="toggle_icon sun"></span> </div> </div> <div className="react-toggle-thumb"></div> <input type="checkbox" aria-label="Dark mode toggle" aria-checked={checked} className="react-toggle-screenreader-only" /> </div> </> ) } export default DayNightSwitcher;
and into index.scss
.#{$prefix}:focus { .react-toggle-thumb { box-shadow: 0 0 2px 3px #0099e0; }
also your assertion
// Getting state & action through props is first step for resuable components isn't true.
In this case, the component should support also a fully un-controlled version, with the optional props onChange and defaultMode with internal state.
onChange
defaultMode
Olso the bright should be light.
Also, the typings of mode should be 'light' | 'dark'.
mode
'light' | 'dark'
I strongly believe the only purpose the author had for this article was to drop a link to their website.
Well! I just tried to show the implementation, that's it. And certainly no bad to showcase your own website on DEV.to platform. Thanks bro!!
But you're not providing any value, to anyone. Why don't you edit your post and go through your process?
I agree. Like a lot of authors recently.
A dislike would be a nice feature.
Hello! Its my first reusable component and I am learning. Will surely work on your comments and will try to improve it. Thanks bro!!
Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink.
Hide child comments as well
Confirm
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
Why you are heavenly using
document.querySelector
andref
?It should be like this and still be accessible.
and into index.scss
also your assertion
In this case, the component should support also a fully un-controlled version, with the optional props
onChange
anddefaultMode
with internal state.Olso the bright should be light.
Also, the typings of
mode
should be'light' | 'dark'
.I strongly believe the only purpose the author had for this article was to drop a link to their website.
Well! I just tried to show the implementation, that's it. And certainly no bad to showcase your own website on DEV.to platform.
Thanks bro!!
But you're not providing any value, to anyone. Why don't you edit your post and go through your process?
I agree.
Like a lot of authors recently.
A dislike would be a nice feature.
Hello!
Its my first reusable component and I am learning. Will surely work on your comments and will try to improve it.
Thanks bro!!