autocraft-ui
v1.0.0
Published
A reusable React component for managing and displaying quantity counters on websites, with support for increment, decrement, and customizable styles.
Maintainers
Readme
��<�!�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�>�
�
�
