#React-Icons with Qwik

2 messages · Page 1 of 1 (latest)

cinder brook
#

Hey all!

I've been trying to use react-icons package and conditionally render icons, but I get this error:
fn.apply is not a function

cinder brook
#

import { component$, useStore } from "@builder.io/qwik";
import { InputFieldProps } from "../types/input-props.interface";
import { AiFillLock, AiFillUnlock } from 'react-icons/ai'

const PasswordInput = component$((props: InputFieldProps) => {
const state = useStore({ fieldVisible: false })

return (
    <label class="relative block w-2/5">
        <div class="cursor-pointer w-8 h-8 absolute top-1/2 transform -translate-y-1/2 right-4" onClick$={() => state.fieldVisible = !state.fieldVisible}>
            {/* Todo: Change these texts to icons! */}
            {state.fieldVisible ? <AiFillLock /> : <AiFillUnlock />}
        </div>

        <input type={state.fieldVisible ? 'text' : 'password'} value={props.value} onInput$={props.onInput$} placeholder="Password goes here..." class="auth-input w-full pr-14" />
    </label>
)

})

export default PasswordInput