import { Link } from 'react-router-dom'; import { useEffect, useState } from 'react'; import CodeHighlight from '../../components/Highlight'; import { useDispatch } from 'react-redux'; import { setPageTitle } from '../../store/themeConfigSlice'; const TouchSpin = () => { const dispatch = useDispatch(); useEffect(() => { dispatch(setPageTitle('TouchSpin')); }); const [codeArr, setCodeArr] = useState([]); const toggleCode = (name: string) => { if (codeArr.includes(name)) { setCodeArr((value) => value.filter((d) => d !== name)); } else { setCodeArr([...codeArr, name]); } }; const [value1, setValue1] = useState(0); const [value2, setValue2] = useState(0); const [value3, setValue3] = useState(0); const [value4, setValue4] = useState(0); const [value5, setValue5] = useState(0); const [value6, setValue6] = useState(0); const [value7, setValue7] = useState(0); const [value8, setValue8] = useState(0); const [value9, setValue9] = useState(0); const [value10, setValue10] = useState(0); const days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']; const [day, setDay] = useState(''); const dayFormatter = (day: number) => { setValue9(day); return setDay(days[day]); }; return (
  • Forms
  • TouchSpin
{/* Basic */}
Button Spin
setValue1(value1 > 0 ? value1 - 1 : 0)} />
{codeArr.includes('code1') && ( 
{`import { useState } from 'react';

const [value1, setValue1] = useState(0);



    
     setValue1(value1 > 0 ? value1 - 1 : 0)}
    />
    

`}
 )}
{/* step of 5 */}
Spin button with step of 5
{codeArr.includes('code2') && ( 
{`import { useState } from 'react';

const [value2, setValue2] = useState(0);



    
    
    

`}
 )}
{/* Wrapping value */}
Wrapping value spin button
{codeArr.includes('code3') && ( 
{`import { useState } from 'react';

const [value3, setValue3] = useState(0);



    
    
    

`}
 )}
{/* Size */}
Size
{/* large */}
{/* default */}
{/* small */}
{codeArr.includes('code4') && ( 
{`import { useState } from 'react';

const [value4, setValue4] = useState(0);
const [value5, setValue5] = useState(0);
const [value6, setValue6] = useState(0);

{/*large*/}


    
    
    



{/*default*/}


    
    
    



{/*small*/}


    
    
    

`}
 )}
{/* Inline Buttons */}
Inline spin button
{codeArr.includes('code5') && ( 
{`import { useState } from 'react';

const [value7, setValue7] = useState(0);



    
    
    

`}
 )}
{/* Vertical Buttons */}
Vertical spin button
{codeArr.includes('code6') && ( 
{`import { useState } from 'react';

const [value8, setValue8] = useState(0);



    
    
    

`}
 )}
{/* text with spin */}
Text with spin button
{codeArr.includes('code7') && ( 
{`import { useState } from 'react';
const [value9, setValue9] = useState(0);
const days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
const [day, setDay] = useState('');

const dayFormatter = (day: number) => {
    setValue9(day);
    return setDay(days[day]);
};



    
    
    

`}
 )}
{/* Change Button Class */}
Change button class
{codeArr.includes('code8') && ( 
{`import { useState } from 'react';
const [value10, setValue10] = useState(0);



    
    
    

`}
 )}
); }; export default TouchSpin;