autocraft-ui
Version:
A reusable React component for managing and displaying quantity counters on websites, with support for increment, decrement, and customizable styles.
153 lines • 9.1 kB
Markdown
��< ! D O C T Y P E h t m l >
< h t m l l a n g = " e n " >
< h e a d >
< m e t a c h a r s e t = " U T F - 8 " >
< m e t a n a m e = " v i e w p o r t " c o n t e n t = " w i d t h = d e v i c e - w i d t h , i n i t i a l - s c a l e = 1 . 0 " >
< t i t l e > A u t o c r a f t D o c u m e n t a t i o n < / t i t l e >
< / h e a d >
< b o d y >
< h 1 > A u t o c r a f t D o c u m e n t a t i o n < / h 1 >
< h 2 > I n t r o d u c t i o n < / h 2 >
< p >
T h e < s t r o n g > A u t o c r a f t < / s t r o n g > l i b r a r y p r o v i d e s r e u s a b l e c o m p o n e n t s f o r R e a c t a n d V i t e p r o j e c t s t o d i s p l a y a n a n i m a t e d c o u n t e r t h a t i n c r e m e n t s t o a s p e c i f i e d v a l u e . I t i s e a s y t o u s e , c u s t o m i z a b l e , a n d o p t i m i z e d f o r p e r f o r m a n c e .
< / p >
< h 2 > T a b l e o f C o n t e n t s < / h 2 >
< u l >
< l i > < a h r e f = " # i n s t a l l a t i o n " > I n s t a l l a t i o n < / a > < / l i >
< l i > < a h r e f = " # a v a i l a b l e - c o m p o n e n t s " > A v a i l a b l e C o m p o n e n t s < / a > < / l i >
< l i > < a h r e f = " # u s a g e " > U s a g e < / a >
< u l >
< l i > < a h r e f = " # r e a c t - p r o j e c t - e x a m p l e " > R e a c t P r o j e c t E x a m p l e < / a > < / l i >
< l i > < a h r e f = " # v i t e - p r o j e c t - e x a m p l e " > V i t e P r o j e c t E x a m p l e < / a > < / l i >
< / u l >
< / l i >
< l i > < a h r e f = " # c o m p o n e n t - p r o p s " > C o m p o n e n t P r o p s < / a > < / l i >
< l i > < a h r e f = " # e r r o r - h a n d l i n g " > E r r o r H a n d l i n g < / a > < / l i >
< l i > < a h r e f = " # s t y l i n g " > S t y l i n g < / a > < / l i >
< l i > < a h r e f = " # l i c e n s e " > L i c e n s e < / a > < / l i >
< l i > < a h r e f = " # h o w - t o - c o n t r i b u t e " > H o w t o C o n t r i b u t e < / a > < / l i >
< l i > < a h r e f = " # a u t h o r s " > A u t h o r s < / a > < / l i >
< / u l >
< h 2 i d = " i n s t a l l a t i o n " > I n s t a l l a t i o n < / h 2 >
< p > I n s t a l l t h e l i b r a r y u s i n g N P M o r Y a r n : < / p >
< p r e > < c o d e > n p m i n s t a l l a u t o c r a f t - u i
< / c o d e > < / p r e >
< p > o r < / p >
< p r e > < c o d e > y a r n a d d a u t o c r a f t - u i
< / c o d e > < / p r e >
< h 2 i d = " a v a i l a b l e - c o m p o n e n t s " > A v a i l a b l e C o m p o n e n t s < / h 2 >
< p > T h e l i b r a r y p r o v i d e s t h e f o l l o w i n g c o m p o n e n t s : < / p >
< u l >
< l i > < c o d e > A u t o C o u n t e r R e a c t < / c o d e > : D e s i g n e d f o r R e a c t p r o j e c t s . < / l i >
< l i > < c o d e > A u t o C o u n t e r V i t e < / c o d e > : O p t i m i z e d f o r V i t e p r o j e c t s . < / l i >
< / u l >
< h 2 i d = " u s a g e " > U s a g e < / h 2 >
< h 3 i d = " r e a c t - p r o j e c t - e x a m p l e " > R e a c t P r o j e c t E x a m p l e < / h 3 >
< p r e > < c o d e >
i m p o r t R e a c t f r o m " r e a c t " ;
i m p o r t { A u t o C o u n t e r R e a c t } f r o m " a u t o c r a f t - u i " ;
f u n c t i o n A p p ( ) {
r e t u r n (
& l t ; d i v & g t ;
& l t ; h 1 & g t ; R e a c t A u t o C o u n t e r E x a m p l e & l t ; / h 1 & g t ;
& l t ; A u t o C o u n t e r R e a c t q u a n t i t y = { 1 0 0 0 } d e l a y = { 2 0 } s i z e = " 2 4 " c o l o r = " b l u e " / & g t ;
& l t ; / d i v & g t ;
) ;
}
e x p o r t d e f a u l t A p p ;
< / c o d e > < / p r e >
< h 3 i d = " v i t e - p r o j e c t - e x a m p l e " > V i t e P r o j e c t E x a m p l e < / h 3 >
< p r e > < c o d e >
i m p o r t R e a c t f r o m " r e a c t " ;
i m p o r t { A u t o C o u n t e r V i t e } f r o m " a u t o c r a f t - u i " ;
f u n c t i o n A p p ( ) {
r e t u r n (
& l t ; d i v & g t ;
& l t ; h 1 & g t ; V i t e A u t o C o u n t e r E x a m p l e & l t ; / h 1 & g t ;
& l t ; A u t o C o u n t e r V i t e q u a n t i t y = { 5 0 0 } d e l a y = { 1 5 } s i z e = " 2 0 " c o l o r = " g r e e n " / & g t ;
& l t ; / d i v & g t ;
) ;
}
e x p o r t d e f a u l t A p p ;
< / c o d e > < / p r e >
< h 2 i d = " c o m p o n e n t - p r o p s " > C o m p o n e n t P r o p s < / h 2 >
< t a b l e b o r d e r = " 1 " c e l l p a d d i n g = " 1 0 " c e l l s p a c i n g = " 0 " >
< t h e a d >
< t r >
< t h > P r o p < / t h >
< t h > T y p e < / t h >
< t h > D e f a u l t < / t h >
< t h > D e s c r i p t i o n < / t h >
< / t r >
< / t h e a d >
< t b o d y >
< t r >
< t d > < c o d e > q u a n t i t y < / c o d e > < / t d >
< t d > N u m b e r < / t d >
< t d > R e q u i r e d < / t d >
< t d > T h e f i n a l v a l u e t h e c o u n t e r a n i m a t e s t o . < / t d >
< / t r >
< t r >
< t d > < c o d e > d e l a y < / c o d e > < / t d >
< t d > N u m b e r < / t d >
< t d > 1 0 < / t d >
< t d > T h e d e l a y i n m i l l i s e c o n d s b e t w e e n e a c h i n c r e m e n t . < / t d >
< / t r >
< t r >
< t d > < c o d e > s i z e < / c o d e > < / t d >
< t d > S t r i n g / N u m b e r < / t d >
< t d > " 1 8 " < / t d >
< t d > T h e f o n t s i z e o f t h e c o u n t e r . < / t d >
< / t r >
< t r >
< t d > < c o d e > c o l o r < / c o d e > < / t d >
< t d > S t r i n g < / t d >
< t d > " b l a c k " < / t d >
< t d > T h e c o l o r o f t h e c o u n t e r t e x t . < / t d >
< / t r >
< / t b o d y >
< / t a b l e >
< h 2 i d = " e r r o r - h a n d l i n g " > E r r o r H a n d l i n g < / h 2 >
< p >
T h e c o m p o n e n t v a l i d a t e s i t s i n p u t s a n d t h r o w s e r r o r s f o r i n v a l i d v a l u e s :
< / p >
< u l >
< l i > I f < c o d e > q u a n t i t y < / c o d e > i s l e s s t h a n o r e q u a l t o 0 , a n e r r o r i s t h r o w n : < c o d e > I n v a l i d ` q u a n t i t y ` v a l u e . < / c o d e > < / l i >
< l i > I f < c o d e > d e l a y < / c o d e > i s l e s s t h a n o r e q u a l t o 0 , a n e r r o r i s t h r o w n : < c o d e > I n v a l i d ` d e l a y ` v a l u e . < / c o d e > < / l i >
< / u l >
< h 2 i d = " s t y l i n g " > S t y l i n g < / h 2 >
< p > T h e c o u n t e r i s s t y l e d u s i n g i n l i n e s t y l e s . Y o u c a n c u s t o m i z e t h e < c o d e > s i z e < / c o d e > a n d < c o d e > c o l o r < / c o d e > p r o p s t o a d j u s t i t s a p p e a r a n c e . < / p >
< h 2 i d = " l i c e n s e " > L i c e n s e < / h 2 >
< p > T h i s p r o j e c t i s l i c e n s e d u n d e r t h e M I T L i c e n s e . S e e t h e < c o d e > L I C E N S E < / c o d e > f i l e f o r d e t a i l s . < / p >
< h 2 i d = " h o w - t o - c o n t r i b u t e " > H o w t o C o n t r i b u t e < / h 2 >
< p > W e w e l c o m e c o n t r i b u t i o n s ! I f y o u ' d l i k e t o c o n t r i b u t e , p l e a s e f o l l o w t h e s e s t e p s : < / p >
< o l >
< l i > F o r k t h e r e p o s i t o r y . < / l i >
< l i > C r e a t e a n e w b r a n c h f o r y o u r f e a t u r e o r b u g f i x . < / l i >
< l i > M a k e y o u r c h a n g e s a n d c o m m i t t h e m . < / l i >
< l i > P u s h t o y o u r f o r k a n d o p e n a p u l l r e q u e s t . < / l i >
< / o l >
< h 2 i d = " a u t h o r s " > A u t h o r s < / h 2 >
< p > C r e a t e d a n d m a i n t a i n e d b y < s t r o n g > L o k e s h K u m a r < / s t r o n g > a n d < s t r o n g > B a l a j i < / s t r o n g > . < / p >
< / b o d y >
< / h t m l >