# Captcha

This is an example component.

```jsx
import { Captcha } from '@chageable/components';
import { useState, useEffect } from 'react';
import { Button } from 'antd';

export default () => {
  const [showCaptcha, setShow] = useState(false);

  const [size, setSize] = useState('default');

  const resizeUpdate = () => {
    // 通过事件对象获取浏览器窗口的宽度
    const w = window.innerWidth;
    if (w < 480) setSize('default');
    else if (w < 980) setSize('big');
    else setSize('large');
  };

  useEffect(() => {
    resizeUpdate();
    // 页面变化时获取浏览器窗口的大小
    window.addEventListener('resize', resizeUpdate);

    return () => {
      // 组件销毁时移除监听事件
      window.removeEventListener('resize', resizeUpdate);
    };
  }, []);

  const onSuccess = (token) => {
    console.log('token:', token);
    setShow(false);
  };

  return (
    <>
      <Captcha
        title="Verify Modal"
        tips="Slide the slider to the right"
        refreshText="Refresh"
        show={showCaptcha}
        onSuccess={onSuccess}
        size={size}
        hide={() => setShow(false)}
      />
      <Button onClick={() => setShow(true)}>图形验证码</Button>
    </>
  );
};
```
