Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- import React, { useState } from "react";
- import { Field } from "formik";
- import styles from "./Style_CustomCheckbox";
- import { useMediaQuery, mobileQuery } from "../../helpers/mediaQuery";
- import whiteCheck from '../../assets/icons/whiteCheck.svg';
- const CustomCheck = ({label, setAnswer, answer}) => {
- const [checked, setChecked] = useState(false);
- let btn_class = checked ? styles.surveyCheckbox : {...styles.surveyCheckbox, backgroundColor: "transparent"};
- let isMobile = useMediaQuery(mobileQuery);
- return (
- <label style={{...styles.checkLabel, ...isMobile && styles.mobCheckLabel }}>
- <span style={{ ...btn_class, ...styles.span }}>
- <img
- style={styles.img}
- src={whiteCheck} alt=''/>
- <Field
- style={styles.defaultCheck}
- type="checkbox"
- name="survey"
- onClick={() => {
- setChecked(!checked);
- setAnswer(...answer, {firstQ: label})
- }}
- />
- </span>
- <div style={{
- ...styles.checkDiv,
- ...isMobile && styles.checkDivMobile
- }}
- >
- {label}
- </div>
- </label>
- );
- };
- export default CustomCheck;
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement