uiforge-react-components
Version:
UiForge is a collection of reusable and customizable React components designed to streamline website UI development. With pre-built components for common web elements, it helps accelerate the creation of clean, interactive, and responsive interfaces.
94 lines • 6.2 kB
Markdown
��< b o d y >
< h 1 > U i F o r g e < / h 1 >
< h 2 > A u t o C o u n t e r C o m p o n e n t < / h 2 >
< p >
< s t r o n g > U i F o r g e < / s t r o n g > p r o v i d e s a r e u s a b l e < s t r o n g > A u t o C o u n t e r < / s t r o n g > R e a c t c o m p o n e n t f o r m a n a g i n g a n d d i s p l a y i n g a n i m a t e d q u a n t i t y c o u n t e r s o n w e b s i t e s . I t s u p p o r t s i n c r e m e n t i n g , d e c r e m e n t i n g , a n d c u s t o m i z a b l e s t y l e s l i k e f o n t s i z e a n d c o l o r . I d e a l f o r u s e c a s e s s u c h a s s h o p p i n g c a r t s , c o u n t e r s , o r a n y U I w h e r e a n u m e r i c v a l u e n e e d s t o b e d i s p l a y e d a n d a n i m a t e d .
< / p >
< h 3 > I n s t a l l a t i o n < / h 3 >
< p > Y o u c a n i n s t a l l t h e < s t r o n g > u i f o r g e < / s t r o n g > c o m p o n e n t v i a 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 u i f o r g e < / c o d e > < / p r e >
< p > O r , u s i n g Y a r n : < / p >
< p r e > < c o d e > y a r n a d d u i f o r g e < / c o d e > < / p r e >
< h 3 > U s a g e < / h 3 >
< p > O n c e i n s t a l l e d , y o u c a n u s e t h e < s t r o n g > A u t o C o u n t e r < / s t r o n g > c o m p o n e n t i n y o u r R e a c t a p p a s f o l l o w s : < / p >
# # # E x a m p l e
` ` ` j s x
i m p o r t { A u t o C o u n t e r } f r o m " u i f o r g e " ;
f u n c t i o n A p p ( ) {
r e t u r n (
< d i v >
< h 1 > A u t o C o u n t e r E x a m p l e < / h 1 >
< A u t o C o u n t e r q u a n t i t y = { 1 0 0 } d e l a y = { 2 0 } s i z e = " 2 4 " c o l o r = " b l u e " / >
< / d i v >
) ;
}
e x p o r t d e f a u l t A p p ;
< A u t o C o u n t e r q u a n t i t y = { 1 0 0 0 } d e l a y = { 5 0 } s i z e = " 3 0 " c o l o r = " g r e e n " / > ;
` ` `
< h 3 > P r o p s < / h 3 >
< t a b l e b o r d e r = " 1 " >
< t h e a d >
< t r >
< t h > P r o p N a m e < / t h >
< t h > T y p e < / t h >
< t h > D e s c r i p t i o n < / t h >
< t h > D e f a u l t V a l u e < / 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 > < c o d e > n u m b e r < / c o d e > < / t d >
< t d > T h e t a r g e t q u a n t i t y ( a p o s i t i v e i n t e g e r ) . T h i s i s t h e n u m b e r t h e c o u n t e r w i l l i n c r e m e n t t o w a r d s . < / t d >
< t d > < s t r o n g > R e q u i r e d < / s t r o n g > < / 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 > < c o d e > n u m b e r < / c o d e > < / 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 d > < c o d e > 1 0 < / c o d e > < / t d >
< / t r >
< t r >
< t d > < c o d e > s i z e < / c o d e > < / t d >
< t d > < c o d e > s t r i n g | n u m b e r < / c o d e > < / t d >
< t d > T h e f o n t s i z e o f t h e d i s p l a y e d n u m b e r . C a n b e a s t r i n g ( e . g . , " 1 8 p x " ) o r a n u m b e r ( e . g . , 1 8 ) . < / t d >
< t d > < c o d e > " 1 8 " < / c o d e > < / 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 > < c o d e > s t r i n g < / c o d e > < / 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 . Y o u c a n u s e a n y v a l i d C S S c o l o r v a l u e . < / t d >
< t d > < c o d e > " b l a c k " < / c o d e > < / t d >
< / t r >
< / t b o d y >
< / t a b l e >
< h 3 > C o n t r i b u t i n g < / h 3 >
< p > I f y o u w o u l d l i k e t o c o n t r i b u t e t o t h i s p r o j e c t , p l e a s e f e e l f r e e t o f o r k t h e r e p o s i t o r y a n d s u b m i t a p u l l r e q u e s t . A l l c o n t r i b u t i o n s a r e w e l c o m e ! < / p >
< h 3 > L i c e n s e < / h 3 >
< 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 I S C 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 3 > B u g s a n d I s s u e s < / h 3 >
< p > I f y o u e n c o u n t e r a n y i s s u e s o r b u g s , p l e a s e f i l e a n i s s u e o n t h e G i t H u b r e p o s i t o r y : < / p >
< p > < a h r e f = " h t t p s : / / g i t h u b . c o m / l o k e s h k u m a r - 2 0 0 3 / U i F o r g e / i s s u e s " > G i t H u b I s s u e s < / a > < / p >
< h 3 > A u t h o r s < / h 3 >
< p > L o k e s h K u m a r - I n i t i a l w o r k - < a h r e f = " h t t p s : / / g i t h u b . c o m / l o k e s h k u m a r - 2 0 0 3 " > l o k e s h k u m a r - 2 0 0 3 < / a > < b r >
B a l a j i - C o n t r i b u t o r - < a h r e f = " h t t p s : / / g i t h u b . c o m / b a l a j i " > b a l a j i < / a >
< / p >
< / b o d y >
` ` `