{"_id":"r-draggable-button","name":"r-draggable-button","dist-tags":{"latest":"0.1.5"},"versions":{"0.1.5":{"name":"r-draggable-button","version":"0.1.5","private":false,"dependencies":{"@testing-library/jest-dom":"^5.14.1","@testing-library/react":"^13.0.0","@testing-library/user-event":"^13.2.1","@types/jest":"^27.0.1","@types/node":"^16.7.13","@types/react":"^18.0.0","@types/react-dom":"^18.0.0","hex-to-rgba":"^2.0.1","react":"^18.2.0","react-dom":"^18.2.0","react-scripts":"5.0.1","typescript":"^4.4.2","web-vitals":"^2.1.0"},"scripts":{"start":"react-scripts start","build":"react-scripts build","test":"react-scripts test","eject":"react-scripts eject"},"eslintConfig":{"extends":["react-app","react-app/jest"]},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"gitHead":"7d56dcdd76e6503a3f42c860d1a239085f8d6367","description":"","_id":"r-draggable-button@0.1.5","_nodeVersion":"19.3.0","_npmVersion":"9.2.0","dist":{"integrity":"sha512-ixlJ9sEwtSLEON+A0nhf5w8Zx7pUrIaCXfMnSsUeQQQT+hclKfhOJGd4FbQ1IF+b+i4u/Sqlrt7Xr6PLdnsfkw==","shasum":"8d8edddc618015774b09902274aa30e40162744d","tarball":"https://registry.npmjs.org/r-draggable-button/-/r-draggable-button-0.1.5.tgz","fileCount":17,"unpackedSize":47583,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF7KG6zIp4eVNCm9CFU7hBS9ZPtnwZx8/tf41jFoGYMuAiA6G/QIelaMVyPUSL6gQreL4xmUi6xnJU+UqGYDEs/PSg=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkOxTDACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqu8A/+IsjsVGEVQwxE9V5mZRSxJ+UDzbfrK44Oac2l0iHbau4u0n0Q\r\nJDIrhnL4wz71HZpHmUX7fHH8KFqzHiNnVHU0/YeYa77MUq35BTuRrkMs4syp\r\nWm6AXJLAnTRZgmdoQiiegY3avGlC5ij2MHHSnDmTPxTILOWX9Na92fnc1kR8\r\nJz/tdCZcqdiJNqFDdntf96rKaQmErcVI+lBRt7SaWY1ThIoIwHHbfReMSltl\r\n4C/X8gr1OApQeoHoIAKosj2Z7kOy/JVCwjcrnmF+8/xSKXF0zqqtZLUWdM7z\r\nKnku/mMLx8Dov/jfNArvHC1a+82+77XTMabdV+6+n/1UjViDKbHIakLRr9gH\r\nSAps5qJAM3isN41iysONFgaWHenS8znq5T6sHFAvERsUJEOu1vPXTGyfMksd\r\n8Wg5q+EStLZRepvRneK3ctABraS4D4CzlJxv1fhRh/ZGEZjhNlfnOVQwHWEc\r\nGXr+4/ccH7ZCgS5rDT1OfJMCfONrERZah3v6THIsH6sQo8CNr3wLcWe4x1VD\r\nh5UgYDpX4m8IPMdiBxuh5Gmp38b6cHjCo/iUg6UCx1I/yV0em1w0ZdCpymLh\r\nu03uPqlYazZ5FdhbiUJ/nTr3KBbeeD1ELiL/QAI5wiZo9gzGgRiFv1X3MZA8\r\nNYrDz92MwhB0Fpf4aQwjHK/mYfe1v+Bu000=\r\n=Bf2i\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"mvinib","email":"vini512033@gmail.com"},"directories":{},"maintainers":[{"name":"mvinib","email":"vini512033@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/r-draggable-button_0.1.5_1681593539416_0.38022076302192187"},"_hasShrinkwrap":false}},"time":{"created":"2023-04-15T21:18:59.415Z","0.1.5":"2023-04-15T21:18:59.570Z","modified":"2023-04-15T21:18:59.781Z"},"maintainers":[{"name":"mvinib","email":"vini512033@gmail.com"}],"readme":"# react-draggable-button\n## Botão móvel para componentes react\n\n\nreact-draggable-button surgiu de uma necessidade em um projeto mobile, então resolvi transformar em um componente personalizável.\n\n## Instalação\nUsando `npm`\n\n```\nnpm install react-draggable-button\n```\n\nUsando `yarn`\n\n```\nyarn add react-draggable-button\n```\n## Importação\n\n```js\nimport { DraggableButton } from 'react-draggable-button';\n```\n\n## Exemplo de uso\n\n```js\nfunction App() {\n  const containerRef = useRef<HTMLDivElement>(null)\n\n  return (\n    <div ref={containerRef} className=\"container\">\n      <DraggableButton\n        containerRef={containerRef} \n        device='auto'\n        backgroundColor='#000'\n        height={50}\n        width={50}\n        borderRadius={25}\n        initialBottom={0}\n        initialRight={0}\n        borderMargin={10}\n        animationTimig={2}\n        resizeTaxOnMove={0.1}\n        zIndex={10}\n        children={<img src={Icon} alt={\"alt Image\"} style={{width: '50%', height: '50%'}}/>}\n        onClick={(() => console.log('clicked'))}\n        pressTimeToClick={0.1}\n        />\n    </div>\n  );\n}\n```\n\n![](https://tc-online-invoices.s3.sa-east-1.amazonaws.com/images-templates/GIF+-+react-draggable-button+-+Feito+com+o+Clipchamp_1681589248815.gif)\n\n## Propriedades\n- ```containerRef: RefObject<HTMLDivElement> (obrigatório)``` - Ref do container que envolverá o componente\n\n- ```device: \"mobile\" | \"desktop\" | \"auto\" (obrigatório)``` - Tipo de dispositivo onde será utilizado. Quando for \"auto\" uma função que detecta o tipo de dispositivo será acionada.\n\n- ```width: number (obrigatório)``` - width do componente.\n\n- ```height: number (obrigatório)``` - height do componente.\n\n- ```borderRadius: number (obrigatório)``` - border-radius do componente.\n\n- ```backgroundColor: string (obrigatório)``` - background-color do componente.\n\n- ```initialBottom: number (obrigatório)``` - bottom inicial do componente.\n\n- ```initialRight: number (obrigatório)``` - right inicial do componente.\n\n- ```children: ReactNode (opcional)``` - Elemento html que ficará dentro do componente.\n\n- ```borderMargin: number (obrigatório)``` - Margem em que o componente ficará das bordas da tela.\n\n- ```animationTimig: number (opcional)``` - Tempo da aninamação pulse ao mover o componente. Por padrão é 0.5.\n\n- ```resizeTaxOnMove: number (opcional)``` - Quanto em porcentagem (0 - 1) o compomente irá aumentar (widht & height) ao ser movido. Por padrão é 0.1.\n\n- ```zIndex: number (opcional)``` - z-index do componente. Por padrão é 100.\n\n- ```onClick: () => void (obrigatório)``` - Função que será executada ao clicar no componente.\n\n- ```pressTimeToClick: number (opcional)``` - Tempo máximo para ser considerado clique. Por padrão é 0.4s.\n\n","readmeFilename":"README.md"}