Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

M1466 alternative toggle #22

Merged
merged 3 commits into from
Feb 19, 2021
Merged

M1466 alternative toggle #22

merged 3 commits into from
Feb 19, 2021

Conversation

mmnoo
Copy link
Contributor

@mmnoo mmnoo commented Feb 17, 2021

Proposing react-toggle instead of react-switch for code maintainability (styled via css/styled components, not inline, or in return statement/jsx)


const OfflineToggle = () => {
const [checked, setChecked] = useState(false)
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Im thinking controlled input state can come later and will probably be in a parent component who owns offline status, or some custom hook instance.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I agree, I'm thinking to store in a global state with context or redux.

@mmnoo mmnoo force-pushed the M1466-alternativeToggle branch from 358a735 to 93a8b3b Compare February 17, 2021 17:54
/**
* Describe your component
*/
const ToggleCss = raw('react-toggle/style.css')
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

hack to get css without having it added globally. facebook/create-react-app#3722 (comment)

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this is cool

const OfflineToggle = () => {
const [checked, setChecked] = useState(false)
const ToggleWrapper = styled.div`
${ToggleCss}
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

dump the expected third party css in a styled component wrapper and override it with library classnames.

@mmnoo
Copy link
Contributor Author

mmnoo commented Feb 17, 2021

@tienhoah Im thinking I like react-toggle better than react-switch. What do you think of using it instead?

@mmnoo
Copy link
Contributor Author

mmnoo commented Feb 17, 2021

@tienhoah tienhoah merged commit 1565ca1 into M1466 Feb 19, 2021
@mmnoo mmnoo deleted the M1466-alternativeToggle branch March 16, 2021 13:12
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants