├── .github └── workflows │ └── main.yml ├── .gitignore ├── LICENSE ├── README.md ├── __mocks__ └── styles.js ├── docs ├── 404 │ └── index.html ├── 404.html ├── 618114337813f31c529dc7f39602a70407e69aeb-4365e113ad9a1430dd6a.js ├── 618114337813f31c529dc7f39602a70407e69aeb-4365e113ad9a1430dd6a.js.LICENSE.txt ├── 618114337813f31c529dc7f39602a70407e69aeb-4365e113ad9a1430dd6a.js.map ├── 618114337813f31c529dc7f39602a70407e69aeb-afc5359bf11dd356aafd.js ├── 618114337813f31c529dc7f39602a70407e69aeb-afc5359bf11dd356aafd.js.LICENSE.txt ├── 618114337813f31c529dc7f39602a70407e69aeb-afc5359bf11dd356aafd.js.map ├── 618114337813f31c529dc7f39602a70407e69aeb-d5f58a3e250f745e73d8.js ├── 618114337813f31c529dc7f39602a70407e69aeb-d5f58a3e250f745e73d8.js.LICENSE.txt ├── 618114337813f31c529dc7f39602a70407e69aeb-d5f58a3e250f745e73d8.js.map ├── app-0af53fc4ba2136800eeb.js ├── app-0af53fc4ba2136800eeb.js.LICENSE.txt ├── app-0af53fc4ba2136800eeb.js.map ├── app-646dfb4c052da5717d6c.js ├── app-646dfb4c052da5717d6c.js.LICENSE.txt ├── app-646dfb4c052da5717d6c.js.map ├── app-90d28663c6a433e2b851.js ├── app-90d28663c6a433e2b851.js.LICENSE.txt ├── app-90d28663c6a433e2b851.js.map ├── assets.json ├── bac1b955-b711947e81fae9e9bc2c.js ├── bac1b955-b711947e81fae9e9bc2c.js.map ├── chunk-map.json ├── component---readme-md-212c473131b02372ecb5.js ├── component---readme-md-212c473131b02372ecb5.js.map ├── component---readme-md-2f9e9842a608be8f9491.js ├── component---readme-md-2f9e9842a608be8f9491.js.map ├── component---readme-md-a3123d65121581c36ef2.js ├── component---readme-md-a3123d65121581c36ef2.js.map ├── component---src-example-mdx-2ca459289afad6a2a1a8.js ├── component---src-example-mdx-2ca459289afad6a2a1a8.js.map ├── component---src-example-mdx-b9cf3f6add7edaadb8b5.js ├── component---src-example-mdx-b9cf3f6add7edaadb8b5.js.map ├── component---src-example-mdx-c81acfe01c5586ee5c53.js ├── component---src-example-mdx-c81acfe01c5586ee5c53.js.map ├── component---src-pages-404-js-ec5d679138bb835ff77f.js ├── component---src-pages-404-js-ec5d679138bb835ff77f.js.map ├── framework-e2acee0b7afcb49ae215.js ├── framework-e2acee0b7afcb49ae215.js.LICENSE.txt ├── framework-e2acee0b7afcb49ae215.js.map ├── index.html ├── page-data │ ├── 404 │ │ └── page-data.json │ ├── 404.html │ │ └── page-data.json │ ├── app-data.json │ ├── index │ │ └── page-data.json │ ├── readme │ │ └── page-data.json │ └── sq │ │ └── d │ │ └── 1635659820.json ├── polyfill-28995e8cbe356f08afe0.js ├── polyfill-28995e8cbe356f08afe0.js.map ├── readme │ └── index.html ├── static │ ├── css │ │ └── src-example.6a6391bdacfae9c0dcbe.css │ └── js │ │ ├── app.6a6391bdacfae9c0dcbe.js │ │ ├── app.6a6391bdacfae9c0dcbe.js.map │ │ ├── src-example.129a44f5.js │ │ ├── src-example.6a6391bdacfae9c0dcbe.js.map │ │ ├── vendors.6a6391bdacfae9c0dcbe.js.map │ │ └── vendors.d0a514a4.js ├── styles-bc72ca78f9bad9fb1f45.js ├── styles-bc72ca78f9bad9fb1f45.js.map ├── styles.dfd529f93c706bbf78a0.css ├── webpack-runtime-195f415acf43a6365648.js ├── webpack-runtime-195f415acf43a6365648.js.map ├── webpack-runtime-6dec16ec98ab01fb5b30.js ├── webpack-runtime-6dec16ec98ab01fb5b30.js.map ├── webpack-runtime-dc442f97e4817a9abaaf.js ├── webpack-runtime-dc442f97e4817a9abaaf.js.map └── webpack.stats.json ├── doczrc.js ├── example ├── dist ├── index.html └── serve.json ├── fab.gif ├── gatsby-config.js ├── jest.config.js ├── logo.png ├── package-lock.json ├── package.json ├── src ├── example.mdx ├── index.tsx └── styles.scss ├── test ├── __snapshots__ │ └── fab.test.tsx.snap └── fab.test.tsx ├── tsconfig.json └── tsdx.config.js /.github/workflows/main.yml: -------------------------------------------------------------------------------- 1 | name: CI 2 | on: [push] 3 | jobs: 4 | build: 5 | name: Build, lint, and test on Node ${{ matrix.node }} and ${{ matrix.os }} 6 | 7 | runs-on: ${{ matrix.os }} 8 | strategy: 9 | matrix: 10 | node: ['12.x'] 11 | os: [ubuntu-latest] 12 | 13 | steps: 14 | - name: Checkout repo 15 | uses: actions/checkout@v2 16 | 17 | - name: Use Node ${{ matrix.node }} 18 | uses: actions/setup-node@v1 19 | with: 20 | node-version: ${{ matrix.node }} 21 | 22 | - name: Install deps, build and publish 23 | uses: bahmutov/npm-install@v1 24 | 25 | - name: Test 26 | run: npm run test -- --ci --coverage --maxWorkers=2 27 | 28 | - name: Build 29 | run: npm run build 30 | 31 | - name: Publish 32 | uses: primer/publish@v3.0.0 33 | env: 34 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} 35 | NPM_AUTH_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }} 36 | NPM_REGISTRY_URL: registry.npmjs.org 37 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | *.log 2 | .DS_Store 3 | node_modules 4 | .cache 5 | dist 6 | .docz 7 | .rts2* 8 | 9 | !example/dist -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 Deric Cain 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ![React Tiny FAB](https://raw.githubusercontent.com/dericgw/react-tiny-fab/master/logo.png) 2 | 3 | > A tiny (~700 byte gzip) WAI-ARIA compliant Floating Action Button for React 4 | 5 | > `react-tiny-fab` v3 now relies on React version 16.8 and up because it is implemented using [React Hooks](https://reactjs.org/docs/hooks-intro.html) 6 | 7 | Want to use a Floating Action Button without having to import the whole Material Design Components library? Weighing in 8 | at only around 671 bytes gzipped, React Tiny FAB is a great solution. It is a lightweight, fast, and flexible component. 9 | 10 | ![React Tiny FAB](https://raw.githubusercontent.com/dericgw/react-tiny-fab/master/fab.gif) 11 | 12 | ## Docs 13 | Please visit here for docs: [https://dericcain.github.io/react-tiny-fab/](https://dericcain.github.io/react-tiny-fab/) 14 | 15 | ## Issues 16 | If you find an issue, head over to the [Issues](https://github.com/dericgw/react-tiny-fab/issues) section and let me 17 | know about it. If you want to be super cool, you can submit a PR that fixes the issue. 18 | 19 | ## License (MIT) 20 | [Check it out here.](https://github.com/dericgw/react-tiny-fab/blob/master/LICENSE) 21 | -------------------------------------------------------------------------------- /__mocks__/styles.js: -------------------------------------------------------------------------------- 1 | module.exports = {}; 2 | -------------------------------------------------------------------------------- /docs/404.html: -------------------------------------------------------------------------------- 1 |
Not Found
-------------------------------------------------------------------------------- /docs/404/index.html: -------------------------------------------------------------------------------- 1 |
Not Found
-------------------------------------------------------------------------------- /docs/618114337813f31c529dc7f39602a70407e69aeb-4365e113ad9a1430dd6a.js.LICENSE.txt: -------------------------------------------------------------------------------- 1 | /*! 2 | * The buffer module from node.js, for the browser. 3 | * 4 | * @author Feross Aboukhadijeh 5 | * @license MIT 6 | */ 7 | 8 | /*! 9 | * array-sort 10 | * 11 | * Copyright (c) 2015-2017, Jon Schlinkert. 12 | * Released under the MIT License. 13 | */ 14 | 15 | /*! 16 | * get-value 17 | * 18 | * Copyright (c) 2014-2015, Jon Schlinkert. 19 | * Licensed under the MIT License. 20 | */ 21 | 22 | /*! 23 | * regjsgen 0.5.2 24 | * Copyright 2014-2020 Benjamin Tan 25 | * Available under the MIT license 26 | */ 27 | 28 | /*! https://mths.be/he v1.2.0 by @mathias | MIT license */ 29 | 30 | /*! https://mths.be/regenerate v1.4.1 by @mathias | MIT license */ 31 | -------------------------------------------------------------------------------- /docs/618114337813f31c529dc7f39602a70407e69aeb-afc5359bf11dd356aafd.js.LICENSE.txt: -------------------------------------------------------------------------------- 1 | /*! 2 | * The buffer module from node.js, for the browser. 3 | * 4 | * @author Feross Aboukhadijeh 5 | * @license MIT 6 | */ 7 | 8 | /*! 9 | * array-sort 10 | * 11 | * Copyright (c) 2015-2017, Jon Schlinkert. 12 | * Released under the MIT License. 13 | */ 14 | 15 | /*! 16 | * get-value 17 | * 18 | * Copyright (c) 2014-2015, Jon Schlinkert. 19 | * Licensed under the MIT License. 20 | */ 21 | 22 | /*! 23 | * regjsgen 0.5.2 24 | * Copyright 2014-2020 Benjamin Tan 25 | * Available under the MIT license 26 | */ 27 | 28 | /*! https://mths.be/he v1.2.0 by @mathias | MIT license */ 29 | 30 | /*! https://mths.be/regenerate v1.4.1 by @mathias | MIT license */ 31 | -------------------------------------------------------------------------------- /docs/618114337813f31c529dc7f39602a70407e69aeb-d5f58a3e250f745e73d8.js.LICENSE.txt: -------------------------------------------------------------------------------- 1 | /*! 2 | * The buffer module from node.js, for the browser. 3 | * 4 | * @author Feross Aboukhadijeh 5 | * @license MIT 6 | */ 7 | 8 | /*! 9 | * array-sort 10 | * 11 | * Copyright (c) 2015-2017, Jon Schlinkert. 12 | * Released under the MIT License. 13 | */ 14 | 15 | /*! 16 | * get-value 17 | * 18 | * Copyright (c) 2014-2015, Jon Schlinkert. 19 | * Licensed under the MIT License. 20 | */ 21 | 22 | /*! 23 | * regjsgen 0.5.2 24 | * Copyright 2014-2020 Benjamin Tan 25 | * Available under the MIT license 26 | */ 27 | 28 | /*! https://mths.be/he v1.2.0 by @mathias | MIT license */ 29 | 30 | /*! https://mths.be/regenerate v1.4.1 by @mathias | MIT license */ 31 | -------------------------------------------------------------------------------- /docs/app-0af53fc4ba2136800eeb.js.LICENSE.txt: -------------------------------------------------------------------------------- 1 | /*! 2 | * domready (c) Dustin Diaz 2014 - License MIT 3 | * ie10 fix - Mikael Kristiansson 2019 4 | */ 5 | -------------------------------------------------------------------------------- /docs/app-646dfb4c052da5717d6c.js.LICENSE.txt: -------------------------------------------------------------------------------- 1 | /*! 2 | * domready (c) Dustin Diaz 2014 - License MIT 3 | * ie10 fix - Mikael Kristiansson 2019 4 | */ 5 | -------------------------------------------------------------------------------- /docs/app-90d28663c6a433e2b851.js.LICENSE.txt: -------------------------------------------------------------------------------- 1 | /*! 2 | * domready (c) Dustin Diaz 2014 - License MIT 3 | * ie10 fix - Mikael Kristiansson 2019 4 | */ 5 | -------------------------------------------------------------------------------- /docs/assets.json: -------------------------------------------------------------------------------- 1 | { 2 | "vendors.js": "/react-tiny-fab/static/js/vendors.d0a514a4.js", 3 | "vendors.js.map": "/react-tiny-fab/static/js/vendors.6a6391bdacfae9c0dcbe.js.map", 4 | "app.js": "/react-tiny-fab/static/js/app.6a6391bdacfae9c0dcbe.js", 5 | "app.js.map": "/react-tiny-fab/static/js/app.6a6391bdacfae9c0dcbe.js.map", 6 | "src-example.css": "/react-tiny-fab/static/css/src-example.6a6391bdacfae9c0dcbe.css", 7 | "src-example.js": "/react-tiny-fab/static/js/src-example.129a44f5.js", 8 | "src-example.js.map": "/react-tiny-fab/static/js/src-example.6a6391bdacfae9c0dcbe.js.map", 9 | "index.html": "/react-tiny-fab/index.html" 10 | } -------------------------------------------------------------------------------- /docs/chunk-map.json: -------------------------------------------------------------------------------- 1 | {"polyfill":["/polyfill-28995e8cbe356f08afe0.js"],"app":["/app-90d28663c6a433e2b851.js"],"component---readme-md":["/component---readme-md-a3123d65121581c36ef2.js"],"component---src-example-mdx":["/component---src-example-mdx-b9cf3f6add7edaadb8b5.js"],"component---src-pages-404-js":["/component---src-pages-404-js-ec5d679138bb835ff77f.js"]} -------------------------------------------------------------------------------- /docs/component---readme-md-212c473131b02372ecb5.js: -------------------------------------------------------------------------------- 1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[4],{"7OsV":function(e,t,n){"use strict";n.r(t),n.d(t,"_frontmatter",(function(){return b})),n.d(t,"default",(function(){return s}));var i=n("Fcif"),a=n("+I+c"),o=n("/FXl"),c=n("TjRS"),b=(n("aD51"),{});void 0!==b&&b&&b===Object(b)&&Object.isExtensible(b)&&!b.hasOwnProperty("__filemeta")&&Object.defineProperty(b,"__filemeta",{configurable:!0,value:{name:"_frontmatter",filename:"README.md"}});var r=c.a;function s(e){var t=e.components,n=Object(a.a)(e,["components"]);return Object(o.b)(r,Object(i.a)({},n,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,'React Tiny FAB'),Object(o.b)("blockquote",null,Object(o.b)("p",{parentName:"blockquote"},"A tiny (~700 byte gzip) WAI-ARIA compliant Floating Action Button for React")),Object(o.b)("blockquote",null,Object(o.b)("p",{parentName:"blockquote"},Object(o.b)("inlineCode",{parentName:"p"},"react-tiny-fab")," v3 now relies on React version 16.8 and up because it is implemented using ",Object(o.b)("a",{href:"https://reactjs.org/docs/hooks-intro.html",parentName:"p"},"React Hooks"))),Object(o.b)("p",null,"Want to use a Floating Action Button without having to import the whole Material Design Components library? Weighing in\nat only around 671 bytes gzipped, React Tiny FAB is a great solution. It is a lightweight, fast, and flexible component."),Object(o.b)("p",null,'React Tiny FAB'),Object(o.b)("h2",{id:"docs"},"Docs"),Object(o.b)("p",null,"Please visit here for docs: ",Object(o.b)("a",{href:"https://dericgw.github.io/react-tiny-fab",parentName:"p"},"https://dericgw.github.io/react-tiny-fab")),Object(o.b)("h2",{id:"issues"},"Issues"),Object(o.b)("p",null,"If you find an issue, head over to the ",Object(o.b)("a",{href:"https://github.com/dericgw/react-tiny-fab/issues",parentName:"p"},"Issues")," section and let me\nknow about it. If you want to be super cool, you can submit a PR that fixes the issue."),Object(o.b)("h2",{id:"license-mit"},"License (MIT)"),Object(o.b)("p",null,Object(o.b)("a",{href:"./LICENSE.md",parentName:"p"},"Check it out here.")))}void 0!==s&&s&&s===Object(s)&&Object.isExtensible(s)&&!s.hasOwnProperty("__filemeta")&&Object.defineProperty(s,"__filemeta",{configurable:!0,value:{name:"MDXContent",filename:"README.md"}}),s.isMDXComponent=!0}}]); 2 | //# sourceMappingURL=component---readme-md-212c473131b02372ecb5.js.map -------------------------------------------------------------------------------- /docs/component---readme-md-212c473131b02372ecb5.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["webpack:///../README.md"],"names":["_frontmatter","MDXLayout","DefaultLayout","MDXContent","components","props","mdxType","isMDXComponent"],"mappings":"6OAMaA,G,UAAe,S,2LAE5B,IAKMC,EAAYC,IACH,SAASC,EAAT,GAGZ,IAFDC,EAEC,EAFDA,WACGC,EACF,8BACD,OAAO,YAACJ,EAAD,eAAeI,EAAf,CAAsBD,WAAYA,EAAYE,QAAQ,cAC3D,oIACA,8BAEE,gBAAO,CACL,WAAc,cADhB,gFAKF,8BAEE,gBAAO,CACL,WAAc,cACb,yBAAgB,CACf,WAAc,KADf,kBAFH,+EAME,gBAAO,CACL,KAAQ,4CACR,WAAc,KAFhB,iBAMJ,0QAEA,mIACA,iBAAQ,CACN,GAAM,QADR,QAGA,oDACE,gBAAO,CACL,KAAQ,2CACR,WAAc,KAFhB,6CAIF,iBAAQ,CACN,GAAM,UADR,UAGA,+DACE,gBAAO,CACL,KAAQ,mDACR,WAAc,KAFhB,UADF,+GAOA,iBAAQ,CACN,GAAM,eADR,iBAGA,qBAAG,gBAAO,CACN,KAAQ,eACR,WAAc,KAFf,6B,yLAQPH,EAAWI,gBAAiB","file":"component---readme-md-212c473131b02372ecb5.js","sourcesContent":["import * as React from 'react'\n /* @jsx mdx */\nimport { mdx } from '@mdx-js/react';\n/* @jsx mdx */\n\nimport DefaultLayout from \"/Users/dericcain/Code/react-tiny-fab-ts/node_modules/gatsby-theme-docz/src/base/Layout.js\";\nexport const _frontmatter = {};\n\nconst makeShortcode = name => function MDXDefaultShortcode(props) {\n console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n return
;\n};\n\nconst MDXLayout = DefaultLayout;\nexport default function MDXContent({\n components,\n ...props\n}) {\n return \n

{`\"React`}

\n
\n\n

{`A tiny (~700 byte gzip) WAI-ARIA compliant Floating Action Button for React`}

\n\n
\n
\n\n

{`react-tiny-fab`}\n {` v3 now relies on React version 16.8 and up because it is implemented using `}\n {`React Hooks`}

\n\n
\n

{`Want to use a Floating Action Button without having to import the whole Material Design Components library? Weighing in\nat only around 671 bytes gzipped, React Tiny FAB is a great solution. It is a lightweight, fast, and flexible component.`}

\n

{`\"React`}

\n

{`Docs`}

\n

{`Please visit here for docs: `}\n {`https://dericgw.github.io/react-tiny-fab`}

\n

{`Issues`}

\n

{`If you find an issue, head over to the `}\n {`Issues`}\n {` section and let me\nknow about it. If you want to be super cool, you can submit a PR that fixes the issue.`}

\n

{`License (MIT)`}

\n

{`Check it out here.`}

\n\n ;\n}\n;\nMDXContent.isMDXComponent = true;\n "],"sourceRoot":""} -------------------------------------------------------------------------------- /docs/component---readme-md-2f9e9842a608be8f9491.js: -------------------------------------------------------------------------------- 1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[4],{"7OsV":function(e,t,n){"use strict";n.r(t),n.d(t,"_frontmatter",(function(){return b})),n.d(t,"default",(function(){return s}));var i=n("Fcif"),a=n("+I+c"),o=n("/FXl"),c=n("TjRS"),b=(n("aD51"),{});void 0!==b&&b&&b===Object(b)&&Object.isExtensible(b)&&!b.hasOwnProperty("__filemeta")&&Object.defineProperty(b,"__filemeta",{configurable:!0,value:{name:"_frontmatter",filename:"README.md"}});var r=c.a;function s(e){var t=e.components,n=Object(a.a)(e,["components"]);return Object(o.b)(r,Object(i.a)({},n,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,'React Tiny FAB'),Object(o.b)("blockquote",null,Object(o.b)("p",{parentName:"blockquote"},"A tiny (~700 byte gzip) WAI-ARIA compliant Floating Action Button for React")),Object(o.b)("blockquote",null,Object(o.b)("p",{parentName:"blockquote"},Object(o.b)("inlineCode",{parentName:"p"},"react-tiny-fab")," v3 now relies on React version 16.8 and up because it is implemented using ",Object(o.b)("a",{href:"https://reactjs.org/docs/hooks-intro.html",parentName:"p"},"React Hooks"))),Object(o.b)("p",null,"Want to use a Floating Action Button without having to import the whole Material Design Components library? Weighing in\nat only around 671 bytes gzipped, React Tiny FAB is a great solution. It is a lightweight, fast, and flexible component."),Object(o.b)("p",null,'React Tiny FAB'),Object(o.b)("h2",{id:"docs"},"Docs"),Object(o.b)("p",null,"Please visit here for docs: ",Object(o.b)("a",{href:"https://dericgw.github.io/react-tiny-fab",parentName:"p"},"https://dericgw.github.io/react-tiny-fab")),Object(o.b)("h2",{id:"issues"},"Issues"),Object(o.b)("p",null,"If you find an issue, head over to the ",Object(o.b)("a",{href:"https://github.com/dericgw/react-tiny-fab/issues",parentName:"p"},"Issues")," section and let me\nknow about it. If you want to be super cool, you can submit a PR that fixes the issue."),Object(o.b)("h2",{id:"license-mit"},"License (MIT)"),Object(o.b)("p",null,Object(o.b)("a",{href:"https://github.com/dericgw/react-tiny-fab/blob/master/LICENSE",parentName:"p"},"Check it out here.")))}void 0!==s&&s&&s===Object(s)&&Object.isExtensible(s)&&!s.hasOwnProperty("__filemeta")&&Object.defineProperty(s,"__filemeta",{configurable:!0,value:{name:"MDXContent",filename:"README.md"}}),s.isMDXComponent=!0}}]); 2 | //# sourceMappingURL=component---readme-md-2f9e9842a608be8f9491.js.map -------------------------------------------------------------------------------- /docs/component---readme-md-2f9e9842a608be8f9491.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["webpack:///../README.md"],"names":["_frontmatter","MDXLayout","DefaultLayout","MDXContent","components","props","mdxType","isMDXComponent"],"mappings":"6OAMaA,G,UAAe,S,2LAE5B,IAKMC,EAAYC,IACH,SAASC,EAAT,GAGZ,IAFDC,EAEC,EAFDA,WACGC,EACF,8BACD,OAAO,YAACJ,EAAD,eAAeI,EAAf,CAAsBD,WAAYA,EAAYE,QAAQ,cAC3D,oIACA,8BAEE,gBAAO,CACL,WAAc,cADhB,gFAKF,8BAEE,gBAAO,CACL,WAAc,cACb,yBAAgB,CACf,WAAc,KADf,kBAFH,+EAME,gBAAO,CACL,KAAQ,4CACR,WAAc,KAFhB,iBAMJ,0QAEA,mIACA,iBAAQ,CACN,GAAM,QADR,QAGA,oDACE,gBAAO,CACL,KAAQ,2CACR,WAAc,KAFhB,6CAIF,iBAAQ,CACN,GAAM,UADR,UAGA,+DACE,gBAAO,CACL,KAAQ,mDACR,WAAc,KAFhB,UADF,+GAOA,iBAAQ,CACN,GAAM,eADR,iBAGA,qBAAG,gBAAO,CACN,KAAQ,gEACR,WAAc,KAFf,6B,yLAQPH,EAAWI,gBAAiB","file":"component---readme-md-2f9e9842a608be8f9491.js","sourcesContent":["import * as React from 'react'\n /* @jsx mdx */\nimport { mdx } from '@mdx-js/react';\n/* @jsx mdx */\n\nimport DefaultLayout from \"/home/dan/code/github.com/dericgw/react-tiny-fab/node_modules/gatsby-theme-docz/src/base/Layout.js\";\nexport const _frontmatter = {};\n\nconst makeShortcode = name => function MDXDefaultShortcode(props) {\n console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n return
;\n};\n\nconst MDXLayout = DefaultLayout;\nexport default function MDXContent({\n components,\n ...props\n}) {\n return \n

{`\"React`}

\n
\n\n

{`A tiny (~700 byte gzip) WAI-ARIA compliant Floating Action Button for React`}

\n\n
\n
\n\n

{`react-tiny-fab`}\n {` v3 now relies on React version 16.8 and up because it is implemented using `}\n {`React Hooks`}

\n\n
\n

{`Want to use a Floating Action Button without having to import the whole Material Design Components library? Weighing in\nat only around 671 bytes gzipped, React Tiny FAB is a great solution. It is a lightweight, fast, and flexible component.`}

\n

{`\"React`}

\n

{`Docs`}

\n

{`Please visit here for docs: `}\n {`https://dericgw.github.io/react-tiny-fab`}

\n

{`Issues`}

\n

{`If you find an issue, head over to the `}\n {`Issues`}\n {` section and let me\nknow about it. If you want to be super cool, you can submit a PR that fixes the issue.`}

\n

{`License (MIT)`}

\n

{`Check it out here.`}

\n\n ;\n}\n;\nMDXContent.isMDXComponent = true;\n "],"sourceRoot":""} -------------------------------------------------------------------------------- /docs/component---readme-md-a3123d65121581c36ef2.js: -------------------------------------------------------------------------------- 1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[4],{"7OsV":function(e,t,n){"use strict";n.r(t),n.d(t,"_frontmatter",(function(){return b})),n.d(t,"default",(function(){return s}));var i=n("Fcif"),a=n("+I+c"),o=n("/FXl"),c=n("TjRS"),b=(n("aD51"),{});void 0!==b&&b&&b===Object(b)&&Object.isExtensible(b)&&!b.hasOwnProperty("__filemeta")&&Object.defineProperty(b,"__filemeta",{configurable:!0,value:{name:"_frontmatter",filename:"README.md"}});var r=c.a;function s(e){var t=e.components,n=Object(a.a)(e,["components"]);return Object(o.b)(r,Object(i.a)({},n,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,'React Tiny FAB'),Object(o.b)("blockquote",null,Object(o.b)("p",{parentName:"blockquote"},"A tiny (~700 byte gzip) WAI-ARIA compliant Floating Action Button for React")),Object(o.b)("blockquote",null,Object(o.b)("p",{parentName:"blockquote"},Object(o.b)("inlineCode",{parentName:"p"},"react-tiny-fab")," v3 now relies on React version 16.8 and up because it is implemented using ",Object(o.b)("a",{href:"https://reactjs.org/docs/hooks-intro.html",parentName:"p"},"React Hooks"))),Object(o.b)("p",null,"Want to use a Floating Action Button without having to import the whole Material Design Components library? Weighing in\nat only around 671 bytes gzipped, React Tiny FAB is a great solution. It is a lightweight, fast, and flexible component."),Object(o.b)("p",null,'React Tiny FAB'),Object(o.b)("h2",{id:"docs"},"Docs"),Object(o.b)("p",null,"Please visit here for docs: ",Object(o.b)("a",{href:"https://dericgw.github.io/react-tiny-fab",parentName:"p"},"https://dericgw.github.io/react-tiny-fab")),Object(o.b)("h2",{id:"issues"},"Issues"),Object(o.b)("p",null,"If you find an issue, head over to the ",Object(o.b)("a",{href:"https://github.com/dericgw/react-tiny-fab/issues",parentName:"p"},"Issues")," section and let me\nknow about it. If you want to be super cool, you can submit a PR that fixes the issue."),Object(o.b)("h2",{id:"license-mit"},"License (MIT)"),Object(o.b)("p",null,Object(o.b)("a",{href:"https://github.com/dericgw/react-tiny-fab/blob/master/LICENSE",parentName:"p"},"Check it out here.")))}void 0!==s&&s&&s===Object(s)&&Object.isExtensible(s)&&!s.hasOwnProperty("__filemeta")&&Object.defineProperty(s,"__filemeta",{configurable:!0,value:{name:"MDXContent",filename:"README.md"}}),s.isMDXComponent=!0}}]); 2 | //# sourceMappingURL=component---readme-md-a3123d65121581c36ef2.js.map -------------------------------------------------------------------------------- /docs/component---readme-md-a3123d65121581c36ef2.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["webpack:///../README.md"],"names":["_frontmatter","MDXLayout","DefaultLayout","MDXContent","components","props","mdxType","isMDXComponent"],"mappings":"6OAMaA,G,UAAe,S,2LAE5B,IAKMC,EAAYC,IACH,SAASC,EAAT,GAGZ,IAFDC,EAEC,EAFDA,WACGC,EACF,8BACD,OAAO,YAACJ,EAAD,eAAeI,EAAf,CAAsBD,WAAYA,EAAYE,QAAQ,cAC3D,oIACA,8BAEE,gBAAO,CACL,WAAc,cADhB,gFAKF,8BAEE,gBAAO,CACL,WAAc,cACb,yBAAgB,CACf,WAAc,KADf,kBAFH,+EAME,gBAAO,CACL,KAAQ,4CACR,WAAc,KAFhB,iBAMJ,0QAEA,mIACA,iBAAQ,CACN,GAAM,QADR,QAGA,oDACE,gBAAO,CACL,KAAQ,2CACR,WAAc,KAFhB,6CAIF,iBAAQ,CACN,GAAM,UADR,UAGA,+DACE,gBAAO,CACL,KAAQ,mDACR,WAAc,KAFhB,UADF,+GAOA,iBAAQ,CACN,GAAM,eADR,iBAGA,qBAAG,gBAAO,CACN,KAAQ,gEACR,WAAc,KAFf,6B,yLAQPH,EAAWI,gBAAiB","file":"component---readme-md-a3123d65121581c36ef2.js","sourcesContent":["import * as React from 'react'\n /* @jsx mdx */\nimport { mdx } from '@mdx-js/react';\n/* @jsx mdx */\n\nimport DefaultLayout from \"/Users/dericcain/Code/react-tiny-fab/node_modules/gatsby-theme-docz/src/base/Layout.js\";\nexport const _frontmatter = {};\n\nconst makeShortcode = name => function MDXDefaultShortcode(props) {\n console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n return
;\n};\n\nconst MDXLayout = DefaultLayout;\nexport default function MDXContent({\n components,\n ...props\n}) {\n return \n

{`\"React`}

\n
\n\n

{`A tiny (~700 byte gzip) WAI-ARIA compliant Floating Action Button for React`}

\n\n
\n
\n\n

{`react-tiny-fab`}\n {` v3 now relies on React version 16.8 and up because it is implemented using `}\n {`React Hooks`}

\n\n
\n

{`Want to use a Floating Action Button without having to import the whole Material Design Components library? Weighing in\nat only around 671 bytes gzipped, React Tiny FAB is a great solution. It is a lightweight, fast, and flexible component.`}

\n

{`\"React`}

\n

{`Docs`}

\n

{`Please visit here for docs: `}\n {`https://dericgw.github.io/react-tiny-fab`}

\n

{`Issues`}

\n

{`If you find an issue, head over to the `}\n {`Issues`}\n {` section and let me\nknow about it. If you want to be super cool, you can submit a PR that fixes the issue.`}

\n

{`License (MIT)`}

\n

{`Check it out here.`}

\n\n ;\n}\n;\nMDXContent.isMDXComponent = true;\n "],"sourceRoot":""} -------------------------------------------------------------------------------- /docs/component---src-example-mdx-2ca459289afad6a2a1a8.js: -------------------------------------------------------------------------------- 1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[5],{WDWg:function(e,t,n){"use strict";n.r(t),n.d(t,"_frontmatter",(function(){return i})),n.d(t,"default",(function(){return p}));var a=n("Fcif"),o=n("+I+c"),b=n("/FXl"),r=n("TjRS"),c=n("3re2"),i=(n("RD2v"),n("aD51"),{});void 0!==i&&i&&i===Object(i)&&Object.isExtensible(i)&&!i.hasOwnProperty("__filemeta")&&Object.defineProperty(i,"__filemeta",{configurable:!0,value:{name:"_frontmatter",filename:"src/example.mdx"}});var l=r.a;function p(e){var t=e.components,n=Object(o.a)(e,["components"]);return Object(b.b)(l,Object(a.a)({},n,{components:t,mdxType:"MDXLayout"}),Object(b.b)("img",{src:"https://raw.githubusercontent.com/dericgw/react-tiny-fab/master/logo.png"}),Object(b.b)("blockquote",null,Object(b.b)("p",{parentName:"blockquote"},"A tiny (~700 byte gzip) WAI-ARIA compliant Floating Action Button for React")),Object(b.b)("h2",{id:"install"},"Install"),Object(b.b)("pre",null,Object(b.b)("code",{parentName:"pre"},"npm install react-tiny-fab\nyarn add react-tiny-fab\n")),Object(b.b)("blockquote",null,Object(b.b)("p",{parentName:"blockquote"},Object(b.b)("inlineCode",{parentName:"p"},"react-tiny-fab")," v3 and up now relies on React version 16.8 and up because it is implemented using ",Object(b.b)("a",{href:"https://reactjs.org/docs/hooks-intro.html",parentName:"p"},"React Hooks"))),Object(b.b)("h2",{id:"usage"},"Usage"),Object(b.b)("p",null,"There are two components available for import - ",Object(b.b)("inlineCode",{parentName:"p"},"Fab")," and ",Object(b.b)("inlineCode",{parentName:"p"},"Action"),". You import them like this:"),Object(b.b)("pre",null,Object(b.b)("code",{parentName:"pre"},"import { Fab, Action } from 'react-tiny-fab';\nimport 'react-tiny-fab/dist/styles.css';\n")),Object(b.b)("h2",{id:"example"},"Example"),Object(b.b)("blockquote",null,Object(b.b)("p",{parentName:"blockquote"},"Check the bottom right of the screen")),Object(b.b)(c.b,{icon:Object(b.b)("span",null,"+"),mainButtonStyles:{backgroundColor:"#e74c3c"},mdxType:"Fab"},Object(b.b)(c.a,{text:"Add Something",style:{backgroundColor:"#3498db"},onClick:function(){return alert("It works!")},mdxType:"Action"},Object(b.b)("p",null,"+")),Object(b.b)(c.a,{text:"Assign Something",style:{backgroundColor:"#3498db"},onClick:function(){return alert("It still works!")},mdxType:"Action"},Object(b.b)("p",null,"="))),Object(b.b)("p",null,"Here is an example of how you would use the components:"),Object(b.b)("pre",null,Object(b.b)("code",{className:"language-js",parentName:"pre"},'// The Fab is the main button. Pass any component to the icon prop and choose\n// either click or hover for the event (default is hover)\n}\n event={event}\n alwaysShowTitle={true}\n onClick={someFunctionForTheMainButton}\n>\n // The Action components are the "buttons" that appear when the Fab is open. You can use the out-of-the-box Action\n // component or you can use a custom component of any type and style it any way that you\'d like. The "text" prop\n // is the popup label that appears when the Action component is hovered.\n \n \n \n \n // Using a custom component for this one. See another example in "example/src/index.js"\n \n \n \n\n')),Object(b.b)("h2",{id:"components"},"Components"),Object(b.b)("h3",{id:"fab-"},Object(b.b)("inlineCode",{parentName:"h3"},"")),Object(b.b)("p",null,"This is the main component that controls the Floating Action Button."),Object(b.b)("h4",{id:"props"},"Props"),Object(b.b)("table",null,Object(b.b)("thead",{parentName:"table"},Object(b.b)("tr",{parentName:"thead"},Object(b.b)("th",{parentName:"tr"},"Prop"),Object(b.b)("th",{parentName:"tr"},"Type"),Object(b.b)("th",{parentName:"tr"},"Default"),Object(b.b)("th",{parentName:"tr"},"Required"),Object(b.b)("th",{parentName:"tr"},"Description"))),Object(b.b)("tbody",{parentName:"table"},Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",{parentName:"tr"},Object(b.b)("inlineCode",{parentName:"td"},"mainButtonStyles")),Object(b.b)("td",{parentName:"tr"},"React.CSSProperties"),Object(b.b)("td",{parentName:"tr"}),Object(b.b)("td",{parentName:"tr"},"false"),Object(b.b)("td",{parentName:"tr"},"This object is passed to the main button's ",Object(b.b)("inlineCode",{parentName:"td"},"style")," prop so use React styles to style the button.")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",{parentName:"tr"},Object(b.b)("inlineCode",{parentName:"td"},"style")),Object(b.b)("td",{parentName:"tr"},"React.CSSProperties"),Object(b.b)("td",{parentName:"tr"},Object(b.b)("inlineCode",{parentName:"td"},"{ bottom: 24, right: 24 }")),Object(b.b)("td",{parentName:"tr"},"false"),Object(b.b)("td",{parentName:"tr"},"How do you want to style the FAB, specifically the position of the FAB? Use ",Object(b.b)("inlineCode",{parentName:"td"},"top"),", ",Object(b.b)("inlineCode",{parentName:"td"},"left"),", ",Object(b.b)("inlineCode",{parentName:"td"},"bottom"),", ",Object(b.b)("inlineCode",{parentName:"td"},"right")," properties to declare where you want the FAB to be positioned as well as any other styles.")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",{parentName:"tr"},Object(b.b)("inlineCode",{parentName:"td"},"icon")),Object(b.b)("td",{parentName:"tr"},"React Element/Component"),Object(b.b)("td",{parentName:"tr"}),Object(b.b)("td",{parentName:"tr"},"true"),Object(b.b)("td",{parentName:"tr"},"This element/component will be the used as the icon for the main button. This can be text, or a Font Awesome icon, or any other component.")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",{parentName:"tr"},Object(b.b)("inlineCode",{parentName:"td"},"event")),Object(b.b)("td",{parentName:"tr"},"'hover'"),Object(b.b)("td",{parentName:"tr"},"'click'"),Object(b.b)("td",{parentName:"tr"},"'hover'"),Object(b.b)("td",{parentName:"tr"},"false")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",{parentName:"tr"},Object(b.b)("inlineCode",{parentName:"td"},"children")),Object(b.b)("td",{parentName:"tr"},"React Element/Component"),Object(b.b)("td",{parentName:"tr"}),Object(b.b)("td",{parentName:"tr"},"false"),Object(b.b)("td",{parentName:"tr"},"This is the children that will be mapped and rendered. This can be anything. There can be up to 6, but no more than 6. An ",Object(b.b)("inlineCode",{parentName:"td"},"Action")," component is provided out of the box.")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",{parentName:"tr"},Object(b.b)("inlineCode",{parentName:"td"},"alwaysShowTitle")),Object(b.b)("td",{parentName:"tr"},"boolean"),Object(b.b)("td",{parentName:"tr"},"false"),Object(b.b)("td",{parentName:"tr"},"false"),Object(b.b)("td",{parentName:"tr"},"If the title of the ",Object(b.b)("inlineCode",{parentName:"td"},"Action")," component should always be shown (not just on hover), set this to true and the title will always be shown")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",{parentName:"tr"},Object(b.b)("inlineCode",{parentName:"td"},"onClick")),Object(b.b)("td",{parentName:"tr"},"function"),Object(b.b)("td",{parentName:"tr"},"null"),Object(b.b)("td",{parentName:"tr"},"false"),Object(b.b)("td",{parentName:"tr"},"If you only need to use the main button for something, then you can attach an ",Object(b.b)("inlineCode",{parentName:"td"},"onClick")," handler to the main button. The React Synthetic Event will be passed in just like a normal ",Object(b.b)("inlineCode",{parentName:"td"},"onClick"))),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",{parentName:"tr"},Object(b.b)("inlineCode",{parentName:"td"},"text")),Object(b.b)("td",{parentName:"tr"},"string"),Object(b.b)("td",{parentName:"tr"},"null"),Object(b.b)("td",{parentName:"tr"},"false"),Object(b.b)("td",{parentName:"tr"},"If you attach an ",Object(b.b)("inlineCode",{parentName:"td"},"onClick")," handler to the main button, then the original ",Object(b.b)("inlineCode",{parentName:"td"},"Action")," components would not show. Instead you can attach ",Object(b.b)("inlineCode",{parentName:"td"},"text")," to display while user hover the FAB")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",{parentName:"tr"},Object(b.b)("inlineCode",{parentName:"td"},"...props")),Object(b.b)("td",{parentName:"tr"},"Anything"),Object(b.b)("td",{parentName:"tr"}),Object(b.b)("td",{parentName:"tr"},"false"),Object(b.b)("td",{parentName:"tr"},"Anything you can add to a React component, you can add here.")))),Object(b.b)("blockquote",null,Object(b.b)("p",{parentName:"blockquote"},"Based on the ",Object(b.b)("inlineCode",{parentName:"p"},"position")," prop, the FAB will figure out the direction of the ",Object(b.b)("inlineCode",{parentName:"p"},"")," ",Object(b.b)("inlineCode",{parentName:"p"},"text")," and also which way to\nexpand when hovered/clicked (up or down).")),Object(b.b)("h3",{id:"action-"},Object(b.b)("inlineCode",{parentName:"h3"},"")),Object(b.b)("p",null,'This component represents the smaller buttons that appear when the main button is hovered/clicked. Now, you do not have\nto use this component. You can use your own custom component(s) and create something totally different than a Floating\nAction Button. For instance, you could create your own "Support Button" that when clicked, will display a chat box or\nsome type of form that submits a contact request.'),Object(b.b)("h4",{id:"props-1"},"Props"),Object(b.b)("table",null,Object(b.b)("thead",{parentName:"table"},Object(b.b)("tr",{parentName:"thead"},Object(b.b)("th",{parentName:"tr"},"Prop"),Object(b.b)("th",{parentName:"tr"},"Type"),Object(b.b)("th",{parentName:"tr"},"Default"),Object(b.b)("th",{parentName:"tr"},"Required"),Object(b.b)("th",{parentName:"tr"},"Description"))),Object(b.b)("tbody",{parentName:"table"},Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",{parentName:"tr"},Object(b.b)("inlineCode",{parentName:"td"},"text")),Object(b.b)("td",{parentName:"tr"},"string"),Object(b.b)("td",{parentName:"tr"},'""'),Object(b.b)("td",{parentName:"tr"},"false"),Object(b.b)("td",{parentName:"tr"},"This is the text that will be displayed when one of the actions is hovered.")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",{parentName:"tr"},Object(b.b)("inlineCode",{parentName:"td"},"children")),Object(b.b)("td",{parentName:"tr"},"React Element/Component"),Object(b.b)("td",{parentName:"tr"}),Object(b.b)("td",{parentName:"tr"},"false"),Object(b.b)("td",{parentName:"tr"},"This will be the icon/text for the action.")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",{parentName:"tr"},Object(b.b)("inlineCode",{parentName:"td"},"...props")),Object(b.b)("td",{parentName:"tr"},"Anything"),Object(b.b)("td",{parentName:"tr"}),Object(b.b)("td",{parentName:"tr"},"false"),Object(b.b)("td",{parentName:"tr"},"Anything you can add to a React component, you can add here, e.g. (",Object(b.b)("inlineCode",{parentName:"td"},"onClick"),", ",Object(b.b)("inlineCode",{parentName:"td"},"style"),", etc.)")))),Object(b.b)("h2",{id:"demo"},"Demo"),Object(b.b)("p",null,"Check out the ",Object(b.b)("inlineCode",{parentName:"p"},"index.html")," file in the ",Object(b.b)("inlineCode",{parentName:"p"},"example")," folder for an example of the traditional FAB and also a form pop-up that could be used to send contact information, or something else."),Object(b.b)("h2",{id:"contributing"},"Contributing"),Object(b.b)("p",null,"If you find a bug, submit an issue with enough information to reproduce the bug. If you have a fix, please do not hesitate to submit a PR. If you feel that the API needs to be modified, open an issue so that we can discuss it first."),Object(b.b)("h3",{id:"running-the-dev-environment"},"Running the dev environment"),Object(b.b)("ol",null,Object(b.b)("li",{parentName:"ol"},"Clone the repo - ",Object(b.b)("inlineCode",{parentName:"li"},"git clone https://github.com/dericgw/react-tiny-fab.git")," && ",Object(b.b)("inlineCode",{parentName:"li"},"cd react-tiny-fab")),Object(b.b)("li",{parentName:"ol"},"Install the dependencies - ",Object(b.b)("inlineCode",{parentName:"li"},"npm i")),Object(b.b)("li",{parentName:"ol"},"Run the example - ",Object(b.b)("inlineCode",{parentName:"li"},"npm start")," ",Object(b.b)("em",{parentName:"li"},"Visit http://localhost:5000"))),Object(b.b)("p",null,"Once you get that going, you should be able to make changes and the page should refresh automatically when those changes are saved."),Object(b.b)("h3",{id:"testing"},"Testing"),Object(b.b)("p",null,"This package is only one JS file and it is tested pretty good. Make sure that none of the tests are breaking if changes\nare made. Also, if you add new functionality and it ",Object(b.b)("em",{parentName:"p"},"warrants")," testing, please add tests. If you need help with this, I\nwill gladly help."),Object(b.b)("h2",{id:"issues"},"Issues"),Object(b.b)("p",null,"If you find an issue, head over to the Issues section and let me know about it. If you want to be super cool, you can submit a PR that fixes the issue."),Object(b.b)("h2",{id:"license-mit"},"License (MIT)"),Object(b.b)("p",null,Object(b.b)("a",{href:"https://github.com/dericgw/react-tiny-fab/blob/master/LICENSE",parentName:"p"},"Check it out here.")))}void 0!==p&&p&&p===Object(p)&&Object.isExtensible(p)&&!p.hasOwnProperty("__filemeta")&&Object.defineProperty(p,"__filemeta",{configurable:!0,value:{name:"MDXContent",filename:"src/example.mdx"}}),p.isMDXComponent=!0}}]); 2 | //# sourceMappingURL=component---src-example-mdx-2ca459289afad6a2a1a8.js.map -------------------------------------------------------------------------------- /docs/component---src-example-mdx-b9cf3f6add7edaadb8b5.js: -------------------------------------------------------------------------------- 1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[5],{WDWg:function(e,t,n){"use strict";n.r(t),n.d(t,"_frontmatter",(function(){return i})),n.d(t,"default",(function(){return p}));var a=n("Fcif"),o=n("+I+c"),b=n("/FXl"),r=n("TjRS"),c=n("3re2"),i=(n("RD2v"),n("aD51"),{});void 0!==i&&i&&i===Object(i)&&Object.isExtensible(i)&&!i.hasOwnProperty("__filemeta")&&Object.defineProperty(i,"__filemeta",{configurable:!0,value:{name:"_frontmatter",filename:"src/example.mdx"}});var l=r.a;function p(e){var t=e.components,n=Object(o.a)(e,["components"]);return Object(b.b)(l,Object(a.a)({},n,{components:t,mdxType:"MDXLayout"}),Object(b.b)("img",{src:"https://raw.githubusercontent.com/dericgw/react-tiny-fab/master/logo.png"}),Object(b.b)("blockquote",null,Object(b.b)("p",{parentName:"blockquote"},"A tiny (~700 byte gzip) WAI-ARIA compliant Floating Action Button for React")),Object(b.b)("h2",{id:"install"},"Install"),Object(b.b)("pre",null,Object(b.b)("code",{parentName:"pre"},"npm install react-tiny-fab\nyarn add react-tiny-fab\n")),Object(b.b)("blockquote",null,Object(b.b)("p",{parentName:"blockquote"},Object(b.b)("inlineCode",{parentName:"p"},"react-tiny-fab")," v3 and up now relies on React version 16.8 and up because it is implemented using ",Object(b.b)("a",{href:"https://reactjs.org/docs/hooks-intro.html",parentName:"p"},"React Hooks"))),Object(b.b)("h2",{id:"usage"},"Usage"),Object(b.b)("p",null,"There are two components available for import - ",Object(b.b)("inlineCode",{parentName:"p"},"Fab")," and ",Object(b.b)("inlineCode",{parentName:"p"},"Action"),". You import them like this:"),Object(b.b)("pre",null,Object(b.b)("code",{parentName:"pre"},"import { Fab, Action } from 'react-tiny-fab';\nimport 'react-tiny-fab/dist/styles.css';\n")),Object(b.b)("h2",{id:"example"},"Example"),Object(b.b)("blockquote",null,Object(b.b)("p",{parentName:"blockquote"},"Check the bottom right of the screen")),Object(b.b)(c.b,{icon:Object(b.b)("span",null,"+"),mainButtonStyles:{backgroundColor:"#e74c3c"},mdxType:"Fab"},Object(b.b)(c.a,{text:"Add Something",style:{backgroundColor:"#3498db"},onClick:function(){return alert("It works!")},mdxType:"Action"},Object(b.b)("p",null,"+")),Object(b.b)(c.a,{text:"Assign Something",style:{backgroundColor:"#3498db"},onClick:function(){return alert("It still works!")},mdxType:"Action"},Object(b.b)("p",null,"="))),Object(b.b)("p",null,"Here is an example of how you would use the components:"),Object(b.b)("pre",null,Object(b.b)("code",{className:"language-js",parentName:"pre"},'// The Fab is the main button. Pass any component to the icon prop and choose\n// either click or hover for the event (default is hover)\n}\n event={event}\n alwaysShowTitle={true}\n onClick={someFunctionForTheMainButton}\n>\n // The Action components are the "buttons" that appear when the Fab is open. You can use the out-of-the-box Action\n // component or you can use a custom component of any type and style it any way that you\'d like. The "text" prop\n // is the popup label that appears when the Action component is hovered.\n \n \n \n \n // Using a custom component for this one. See another example in "example/src/index.js"\n \n \n \n\n')),Object(b.b)("h2",{id:"components"},"Components"),Object(b.b)("h3",{id:"fab-"},Object(b.b)("inlineCode",{parentName:"h3"},"")),Object(b.b)("p",null,"This is the main component that controls the Floating Action Button."),Object(b.b)("h4",{id:"props"},"Props"),Object(b.b)("table",null,Object(b.b)("thead",{parentName:"table"},Object(b.b)("tr",{parentName:"thead"},Object(b.b)("th",{parentName:"tr"},"Prop"),Object(b.b)("th",{parentName:"tr"},"Type"),Object(b.b)("th",{parentName:"tr"},"Default"),Object(b.b)("th",{parentName:"tr"},"Required"),Object(b.b)("th",{parentName:"tr"},"Description"))),Object(b.b)("tbody",{parentName:"table"},Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",{parentName:"tr"},Object(b.b)("inlineCode",{parentName:"td"},"mainButtonStyles")),Object(b.b)("td",{parentName:"tr"},"React.CSSProperties"),Object(b.b)("td",{parentName:"tr"}),Object(b.b)("td",{parentName:"tr"},"false"),Object(b.b)("td",{parentName:"tr"},"This object is passed to the main button's ",Object(b.b)("inlineCode",{parentName:"td"},"style")," prop so use React styles to style the button.")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",{parentName:"tr"},Object(b.b)("inlineCode",{parentName:"td"},"style")),Object(b.b)("td",{parentName:"tr"},"React.CSSProperties"),Object(b.b)("td",{parentName:"tr"},Object(b.b)("inlineCode",{parentName:"td"},"{ bottom: 24, right: 24 }")),Object(b.b)("td",{parentName:"tr"},"false"),Object(b.b)("td",{parentName:"tr"},"How do you want to style the FAB, specifically the position of the FAB? Use ",Object(b.b)("inlineCode",{parentName:"td"},"top"),", ",Object(b.b)("inlineCode",{parentName:"td"},"left"),", ",Object(b.b)("inlineCode",{parentName:"td"},"bottom"),", ",Object(b.b)("inlineCode",{parentName:"td"},"right")," properties to declare where you want the FAB to be positioned as well as any other styles.")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",{parentName:"tr"},Object(b.b)("inlineCode",{parentName:"td"},"icon")),Object(b.b)("td",{parentName:"tr"},"React Element/Component"),Object(b.b)("td",{parentName:"tr"}),Object(b.b)("td",{parentName:"tr"},"true"),Object(b.b)("td",{parentName:"tr"},"This element/component will be the used as the icon for the main button. This can be text, or a Font Awesome icon, or any other component.")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",{parentName:"tr"},Object(b.b)("inlineCode",{parentName:"td"},"event")),Object(b.b)("td",{parentName:"tr"},"'hover'"),Object(b.b)("td",{parentName:"tr"},"'click'"),Object(b.b)("td",{parentName:"tr"},"'hover'"),Object(b.b)("td",{parentName:"tr"},"false")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",{parentName:"tr"},Object(b.b)("inlineCode",{parentName:"td"},"children")),Object(b.b)("td",{parentName:"tr"},"React Element/Component"),Object(b.b)("td",{parentName:"tr"}),Object(b.b)("td",{parentName:"tr"},"false"),Object(b.b)("td",{parentName:"tr"},"This is the children that will be mapped and rendered. This can be anything. There can be up to 6, but no more than 6. An ",Object(b.b)("inlineCode",{parentName:"td"},"Action")," component is provided out of the box.")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",{parentName:"tr"},Object(b.b)("inlineCode",{parentName:"td"},"alwaysShowTitle")),Object(b.b)("td",{parentName:"tr"},"boolean"),Object(b.b)("td",{parentName:"tr"},"false"),Object(b.b)("td",{parentName:"tr"},"false"),Object(b.b)("td",{parentName:"tr"},"If the title of the ",Object(b.b)("inlineCode",{parentName:"td"},"Action")," component should always be shown (not just on hover), set this to true and the title will always be shown")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",{parentName:"tr"},Object(b.b)("inlineCode",{parentName:"td"},"onClick")),Object(b.b)("td",{parentName:"tr"},"function"),Object(b.b)("td",{parentName:"tr"},"null"),Object(b.b)("td",{parentName:"tr"},"false"),Object(b.b)("td",{parentName:"tr"},"If you only need to use the main button for something, then you can attach an ",Object(b.b)("inlineCode",{parentName:"td"},"onClick")," handler to the main button. The React Synthetic Event will be passed in just like a normal ",Object(b.b)("inlineCode",{parentName:"td"},"onClick"))),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",{parentName:"tr"},Object(b.b)("inlineCode",{parentName:"td"},"text")),Object(b.b)("td",{parentName:"tr"},"string"),Object(b.b)("td",{parentName:"tr"},"null"),Object(b.b)("td",{parentName:"tr"},"false"),Object(b.b)("td",{parentName:"tr"},"If you attach an ",Object(b.b)("inlineCode",{parentName:"td"},"onClick")," handler to the main button, then the original ",Object(b.b)("inlineCode",{parentName:"td"},"Action")," components would not show. Instead you can attach ",Object(b.b)("inlineCode",{parentName:"td"},"text")," to display while user hover the FAB")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",{parentName:"tr"},Object(b.b)("inlineCode",{parentName:"td"},"...props")),Object(b.b)("td",{parentName:"tr"},"Anything"),Object(b.b)("td",{parentName:"tr"}),Object(b.b)("td",{parentName:"tr"},"false"),Object(b.b)("td",{parentName:"tr"},"Anything you can add to a React component, you can add here.")))),Object(b.b)("blockquote",null,Object(b.b)("p",{parentName:"blockquote"},"Based on the ",Object(b.b)("inlineCode",{parentName:"p"},"position")," prop, the FAB will figure out the direction of the ",Object(b.b)("inlineCode",{parentName:"p"},"")," ",Object(b.b)("inlineCode",{parentName:"p"},"text")," and also which way to\nexpand when hovered/clicked (up or down).")),Object(b.b)("h3",{id:"action-"},Object(b.b)("inlineCode",{parentName:"h3"},"")),Object(b.b)("p",null,'This component represents the smaller buttons that appear when the main button is hovered/clicked. Now, you do not have\nto use this component. You can use your own custom component(s) and create something totally different than a Floating\nAction Button. For instance, you could create your own "Support Button" that when clicked, will display a chat box or\nsome type of form that submits a contact request.'),Object(b.b)("h4",{id:"props-1"},"Props"),Object(b.b)("table",null,Object(b.b)("thead",{parentName:"table"},Object(b.b)("tr",{parentName:"thead"},Object(b.b)("th",{parentName:"tr"},"Prop"),Object(b.b)("th",{parentName:"tr"},"Type"),Object(b.b)("th",{parentName:"tr"},"Default"),Object(b.b)("th",{parentName:"tr"},"Required"),Object(b.b)("th",{parentName:"tr"},"Description"))),Object(b.b)("tbody",{parentName:"table"},Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",{parentName:"tr"},Object(b.b)("inlineCode",{parentName:"td"},"text")),Object(b.b)("td",{parentName:"tr"},"string"),Object(b.b)("td",{parentName:"tr"},'""'),Object(b.b)("td",{parentName:"tr"},"false"),Object(b.b)("td",{parentName:"tr"},"This is the text that will be displayed when one of the actions is hovered.")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",{parentName:"tr"},Object(b.b)("inlineCode",{parentName:"td"},"children")),Object(b.b)("td",{parentName:"tr"},"React Element/Component"),Object(b.b)("td",{parentName:"tr"}),Object(b.b)("td",{parentName:"tr"},"false"),Object(b.b)("td",{parentName:"tr"},"This will be the icon/text for the action.")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",{parentName:"tr"},Object(b.b)("inlineCode",{parentName:"td"},"...props")),Object(b.b)("td",{parentName:"tr"},"Anything"),Object(b.b)("td",{parentName:"tr"}),Object(b.b)("td",{parentName:"tr"},"false"),Object(b.b)("td",{parentName:"tr"},"Anything you can add to a React component, you can add here, e.g. (",Object(b.b)("inlineCode",{parentName:"td"},"onClick"),", ",Object(b.b)("inlineCode",{parentName:"td"},"style"),", etc.)")))),Object(b.b)("h2",{id:"demo"},"Demo"),Object(b.b)("p",null,"Check out the ",Object(b.b)("inlineCode",{parentName:"p"},"index.html")," file in the ",Object(b.b)("inlineCode",{parentName:"p"},"example")," folder for an example of the traditional FAB and also a form pop-up that could be used to send contact information, or something else."),Object(b.b)("h2",{id:"contributing"},"Contributing"),Object(b.b)("p",null,"If you find a bug, submit an issue with enough information to reproduce the bug. If you have a fix, please do not hesitate to submit a PR. If you feel that the API needs to be modified, open an issue so that we can discuss it first."),Object(b.b)("h3",{id:"running-the-dev-environment"},"Running the dev environment"),Object(b.b)("ol",null,Object(b.b)("li",{parentName:"ol"},"Clone the repo - ",Object(b.b)("inlineCode",{parentName:"li"},"git clone https://github.com/dericgw/react-tiny-fab.git")," && ",Object(b.b)("inlineCode",{parentName:"li"},"cd react-tiny-fab")),Object(b.b)("li",{parentName:"ol"},"Install the dependencies - ",Object(b.b)("inlineCode",{parentName:"li"},"npm i")),Object(b.b)("li",{parentName:"ol"},"Run the example - ",Object(b.b)("inlineCode",{parentName:"li"},"npm start")," ",Object(b.b)("em",{parentName:"li"},"Visit http://localhost:5000"))),Object(b.b)("p",null,"Once you get that going, you should be able to make changes and the page should refresh automatically when those changes are saved."),Object(b.b)("h3",{id:"testing"},"Testing"),Object(b.b)("p",null,"This package is only one JS file and it is tested pretty good. Make sure that none of the tests are breaking if changes\nare made. Also, if you add new functionality and it ",Object(b.b)("em",{parentName:"p"},"warrants")," testing, please add tests. If you need help with this, I\nwill gladly help."),Object(b.b)("h2",{id:"issues"},"Issues"),Object(b.b)("p",null,"If you find an issue, head over to the Issues section and let me know about it. If you want to be super cool, you can submit a PR that fixes the issue."),Object(b.b)("h2",{id:"license-mit"},"License (MIT)"),Object(b.b)("p",null,Object(b.b)("a",{href:"https://github.com/dericgw/react-tiny-fab/blob/master/LICENSE",parentName:"p"},"Check it out here.")))}void 0!==p&&p&&p===Object(p)&&Object.isExtensible(p)&&!p.hasOwnProperty("__filemeta")&&Object.defineProperty(p,"__filemeta",{configurable:!0,value:{name:"MDXContent",filename:"src/example.mdx"}}),p.isMDXComponent=!0}}]); 2 | //# sourceMappingURL=component---src-example-mdx-b9cf3f6add7edaadb8b5.js.map -------------------------------------------------------------------------------- /docs/component---src-example-mdx-c81acfe01c5586ee5c53.js: -------------------------------------------------------------------------------- 1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[5],{WDWg:function(e,t,n){"use strict";n.r(t),n.d(t,"_frontmatter",(function(){return i})),n.d(t,"default",(function(){return p}));var a=n("Fcif"),o=n("+I+c"),b=n("/FXl"),r=n("TjRS"),c=n("3re2"),i=(n("RD2v"),n("aD51"),{});void 0!==i&&i&&i===Object(i)&&Object.isExtensible(i)&&!i.hasOwnProperty("__filemeta")&&Object.defineProperty(i,"__filemeta",{configurable:!0,value:{name:"_frontmatter",filename:"src/example.mdx"}});var l=r.a;function p(e){var t=e.components,n=Object(o.a)(e,["components"]);return Object(b.b)(l,Object(a.a)({},n,{components:t,mdxType:"MDXLayout"}),Object(b.b)("img",{src:"https://raw.githubusercontent.com/dericgw/react-tiny-fab/master/logo.png"}),Object(b.b)("blockquote",null,Object(b.b)("p",{parentName:"blockquote"},"A tiny (~700 byte gzip) WAI-ARIA compliant Floating Action Button for React")),Object(b.b)("h2",{id:"install"},"Install"),Object(b.b)("pre",null,Object(b.b)("code",{parentName:"pre"},"npm install react-tiny-fab\nyarn add react-tiny-fab\n")),Object(b.b)("blockquote",null,Object(b.b)("p",{parentName:"blockquote"},Object(b.b)("inlineCode",{parentName:"p"},"react-tiny-fab")," v3 and up now relies on React version 16.8 and up because it is implemented using ",Object(b.b)("a",{href:"https://reactjs.org/docs/hooks-intro.html",parentName:"p"},"React Hooks"))),Object(b.b)("h2",{id:"usage"},"Usage"),Object(b.b)("p",null,"There are two components available for import - ",Object(b.b)("inlineCode",{parentName:"p"},"Fab")," and ",Object(b.b)("inlineCode",{parentName:"p"},"Action"),". You import them like this:"),Object(b.b)("pre",null,Object(b.b)("code",{parentName:"pre"},"import { Fab, Action } from 'react-tiny-fab';\nimport 'react-tiny-fab/dist/styles.css';\n")),Object(b.b)("h2",{id:"example"},"Example"),Object(b.b)("blockquote",null,Object(b.b)("p",{parentName:"blockquote"},"Check the bottom right of the screen")),Object(b.b)(c.b,{icon:Object(b.b)("span",null,"+"),mainButtonStyles:{backgroundColor:"#e74c3c"},mdxType:"Fab"},Object(b.b)(c.a,{text:"Add Something",style:{backgroundColor:"#3498db"},onClick:function(){return alert("It works!")},mdxType:"Action"},Object(b.b)("p",null,"+")),Object(b.b)(c.a,{text:"Assign Something",style:{backgroundColor:"#3498db"},onClick:function(){return alert("It still works!")},mdxType:"Action"},Object(b.b)("p",null,"="))),Object(b.b)("p",null,"Here is an example of how you would use the components:"),Object(b.b)("pre",null,Object(b.b)("code",{className:"language-js",parentName:"pre"},'// The Fab is the main button. Pass any component to the icon prop and choose \n// either click or hover for the event (default is hover)\n}\n event={event}\n alwaysShowTitle={true}\n onClick={someFunctionForTheMainButton}\n>\n // The Action components are the "buttons" that appear when the Fab is open. You can use the out-of-the-box Action \n // component or you can use a custom component of any type and style it any way that you\'d like. The "text" prop\n // is the popup label that appears when the Action component is hovered.\n \n \n \n \n // Using a custom component for this one. See another example in "example/src/index.js"\n \n \n \n\n')),Object(b.b)("h2",{id:"components"},"Components"),Object(b.b)("h3",{id:"fab-"},Object(b.b)("inlineCode",{parentName:"h3"},"")),Object(b.b)("p",null,"This is the main component that controls the Floating Action Button."),Object(b.b)("h4",{id:"props"},"Props"),Object(b.b)("table",null,Object(b.b)("thead",{parentName:"table"},Object(b.b)("tr",{parentName:"thead"},Object(b.b)("th",{parentName:"tr"},"Prop"),Object(b.b)("th",{parentName:"tr"},"Type"),Object(b.b)("th",{parentName:"tr"},"Default"),Object(b.b)("th",{parentName:"tr"},"Required"),Object(b.b)("th",{parentName:"tr"},"Description"))),Object(b.b)("tbody",{parentName:"table"},Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",{parentName:"tr"},Object(b.b)("inlineCode",{parentName:"td"},"mainButtonStyles")),Object(b.b)("td",{parentName:"tr"},"React.CSSProperties"),Object(b.b)("td",{parentName:"tr"}),Object(b.b)("td",{parentName:"tr"},"false"),Object(b.b)("td",{parentName:"tr"},"This object is passed to the main button's ",Object(b.b)("inlineCode",{parentName:"td"},"style")," prop so use React styles to style the button.")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",{parentName:"tr"},Object(b.b)("inlineCode",{parentName:"td"},"style")),Object(b.b)("td",{parentName:"tr"},"React.CSSProperties"),Object(b.b)("td",{parentName:"tr"},Object(b.b)("inlineCode",{parentName:"td"},"{ bottom: 24, right: 24 }")),Object(b.b)("td",{parentName:"tr"},"false"),Object(b.b)("td",{parentName:"tr"},"How do you want to style the FAB, specifically the position of the FAB? Use ",Object(b.b)("inlineCode",{parentName:"td"},"top"),", ",Object(b.b)("inlineCode",{parentName:"td"},"left"),", ",Object(b.b)("inlineCode",{parentName:"td"},"bottom"),", ",Object(b.b)("inlineCode",{parentName:"td"},"right")," properties to declare where you want the FAB to be positioned as well as any other styles.")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",{parentName:"tr"},Object(b.b)("inlineCode",{parentName:"td"},"icon")),Object(b.b)("td",{parentName:"tr"},"React Element/Component"),Object(b.b)("td",{parentName:"tr"}),Object(b.b)("td",{parentName:"tr"},"true"),Object(b.b)("td",{parentName:"tr"},"This element/component will be the used as the icon for the main button. This can be text, or a Font Awesome icon, or any other component.")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",{parentName:"tr"},Object(b.b)("inlineCode",{parentName:"td"},"event")),Object(b.b)("td",{parentName:"tr"},"'hover'"),Object(b.b)("td",{parentName:"tr"},"'click'"),Object(b.b)("td",{parentName:"tr"},"'hover'"),Object(b.b)("td",{parentName:"tr"},"false")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",{parentName:"tr"},Object(b.b)("inlineCode",{parentName:"td"},"children")),Object(b.b)("td",{parentName:"tr"},"React Element/Component"),Object(b.b)("td",{parentName:"tr"}),Object(b.b)("td",{parentName:"tr"},"false"),Object(b.b)("td",{parentName:"tr"},"This is the children that will be mapped and rendered. This can be anything. There can be up to 6, but no more than 6. An ",Object(b.b)("inlineCode",{parentName:"td"},"Action")," component is provided out of the box.")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",{parentName:"tr"},Object(b.b)("inlineCode",{parentName:"td"},"alwaysShowTitle")),Object(b.b)("td",{parentName:"tr"},"boolean"),Object(b.b)("td",{parentName:"tr"},"false"),Object(b.b)("td",{parentName:"tr"},"false"),Object(b.b)("td",{parentName:"tr"},"If the title of the ",Object(b.b)("inlineCode",{parentName:"td"},"Action")," component should always be shown (not just on hover), set this to true and the title will always be shown")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",{parentName:"tr"},Object(b.b)("inlineCode",{parentName:"td"},"onClick")),Object(b.b)("td",{parentName:"tr"},"function"),Object(b.b)("td",{parentName:"tr"},"null"),Object(b.b)("td",{parentName:"tr"},"false"),Object(b.b)("td",{parentName:"tr"},"If you only need to use the main button for something, then you can attach an ",Object(b.b)("inlineCode",{parentName:"td"},"onClick")," handler to the main button. The React Synthetic Event will be passed in just like a normal ",Object(b.b)("inlineCode",{parentName:"td"},"onClick"))),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",{parentName:"tr"},Object(b.b)("inlineCode",{parentName:"td"},"text")),Object(b.b)("td",{parentName:"tr"},"string"),Object(b.b)("td",{parentName:"tr"},"null"),Object(b.b)("td",{parentName:"tr"},"false"),Object(b.b)("td",{parentName:"tr"},"If you attach an ",Object(b.b)("inlineCode",{parentName:"td"},"onClick")," handler to the main button, then the original ",Object(b.b)("inlineCode",{parentName:"td"},"Action")," components would not show. Instead you can attach ",Object(b.b)("inlineCode",{parentName:"td"},"text")," to display while user hover the FAB")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",{parentName:"tr"},Object(b.b)("inlineCode",{parentName:"td"},"...props")),Object(b.b)("td",{parentName:"tr"},"Anything"),Object(b.b)("td",{parentName:"tr"}),Object(b.b)("td",{parentName:"tr"},"false"),Object(b.b)("td",{parentName:"tr"},"Anything you can add to a React component, you can add here.")))),Object(b.b)("blockquote",null,Object(b.b)("p",{parentName:"blockquote"},"Based on the ",Object(b.b)("inlineCode",{parentName:"p"},"position")," prop, the FAB will figure out the direction of the ",Object(b.b)("inlineCode",{parentName:"p"},"")," ",Object(b.b)("inlineCode",{parentName:"p"},"text")," and also which way to\nexpand when hovered/clicked (up or down).")),Object(b.b)("h3",{id:"action-"},Object(b.b)("inlineCode",{parentName:"h3"},"")),Object(b.b)("p",null,'This component represents the smaller buttons that appear when the main button is hovered/clicked. Now, you do not have\nto use this component. You can use your own custom component(s) and create something totally different than a Floating\nAction Button. For instance, you could create your own "Support Button" that when clicked, will display a chat box or\nsome type of form that submits a contact request.'),Object(b.b)("h4",{id:"props-1"},"Props"),Object(b.b)("table",null,Object(b.b)("thead",{parentName:"table"},Object(b.b)("tr",{parentName:"thead"},Object(b.b)("th",{parentName:"tr"},"Prop"),Object(b.b)("th",{parentName:"tr"},"Type"),Object(b.b)("th",{parentName:"tr"},"Default"),Object(b.b)("th",{parentName:"tr"},"Required"),Object(b.b)("th",{parentName:"tr"},"Description"))),Object(b.b)("tbody",{parentName:"table"},Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",{parentName:"tr"},Object(b.b)("inlineCode",{parentName:"td"},"text")),Object(b.b)("td",{parentName:"tr"},"string"),Object(b.b)("td",{parentName:"tr"},'""'),Object(b.b)("td",{parentName:"tr"},"false"),Object(b.b)("td",{parentName:"tr"},"This is the text that will be displayed when one of the actions is hovered.")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",{parentName:"tr"},Object(b.b)("inlineCode",{parentName:"td"},"children")),Object(b.b)("td",{parentName:"tr"},"React Element/Component"),Object(b.b)("td",{parentName:"tr"}),Object(b.b)("td",{parentName:"tr"},"false"),Object(b.b)("td",{parentName:"tr"},"This will be the icon/text for the action.")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",{parentName:"tr"},Object(b.b)("inlineCode",{parentName:"td"},"...props")),Object(b.b)("td",{parentName:"tr"},"Anything"),Object(b.b)("td",{parentName:"tr"}),Object(b.b)("td",{parentName:"tr"},"false"),Object(b.b)("td",{parentName:"tr"},"Anything you can add to a React component, you can add here, e.g. (",Object(b.b)("inlineCode",{parentName:"td"},"onClick"),", ",Object(b.b)("inlineCode",{parentName:"td"},"style"),", etc.)")))),Object(b.b)("h2",{id:"demo"},"Demo"),Object(b.b)("p",null,"Check out the ",Object(b.b)("inlineCode",{parentName:"p"},"index.html")," file in the ",Object(b.b)("inlineCode",{parentName:"p"},"example")," folder for an example of the traditional FAB and also a form pop-up that could be used to send contact information, or something else."),Object(b.b)("h2",{id:"contributing"},"Contributing"),Object(b.b)("p",null,"If you find a bug, submit an issue with enough information to reproduce the bug. If you have a fix, please do not hesitate to submit a PR. If you feel that the API needs to be modified, open an issue so that we can discuss it first."),Object(b.b)("h3",{id:"running-the-dev-environment"},"Running the dev environment"),Object(b.b)("ol",null,Object(b.b)("li",{parentName:"ol"},"Clone the repo - ",Object(b.b)("inlineCode",{parentName:"li"},"git clone https://github.com/dericgw/react-tiny-fab.git")," && ",Object(b.b)("inlineCode",{parentName:"li"},"cd react-tiny-fab")),Object(b.b)("li",{parentName:"ol"},"Install the dependencies - ",Object(b.b)("inlineCode",{parentName:"li"},"npm i")),Object(b.b)("li",{parentName:"ol"},"Run the example - ",Object(b.b)("inlineCode",{parentName:"li"},"npm start")," ",Object(b.b)("em",{parentName:"li"},"Visit http://localhost:5000"))),Object(b.b)("p",null,"Once you get that going, you should be able to make changes and the page should refresh automatically when those changes are saved."),Object(b.b)("h3",{id:"testing"},"Testing"),Object(b.b)("p",null,"This package is only one JS file and it is tested pretty good. Make sure that none of the tests are breaking if changes\nare made. Also, if you add new functionality and it ",Object(b.b)("em",{parentName:"p"},"warrants")," testing, please add tests. If you need help with this, I\nwill gladly help."),Object(b.b)("h2",{id:"issues"},"Issues"),Object(b.b)("p",null,"If you find an issue, head over to the Issues section and let me know about it. If you want to be super cool, you can submit a PR that fixes the issue."),Object(b.b)("h2",{id:"license-mit"},"License (MIT)"),Object(b.b)("p",null,Object(b.b)("a",{href:"./LICENSE.md",parentName:"p"},"Check it out here.")))}void 0!==p&&p&&p===Object(p)&&Object.isExtensible(p)&&!p.hasOwnProperty("__filemeta")&&Object.defineProperty(p,"__filemeta",{configurable:!0,value:{name:"MDXContent",filename:"src/example.mdx"}}),p.isMDXComponent=!0}}]); 2 | //# sourceMappingURL=component---src-example-mdx-c81acfe01c5586ee5c53.js.map -------------------------------------------------------------------------------- /docs/component---src-pages-404-js-ec5d679138bb835ff77f.js: -------------------------------------------------------------------------------- 1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[6],{w2l6:function(t,e,n){"use strict";n.r(e);var i=n("aD51");e.default=function(){return Object(i.c)("div",{style:{display:"flex",alignItems:"center",justifyContent:"center",height:"100vh",width:"100vw",fontSize:32}},"Not Found")}}}]); 2 | //# sourceMappingURL=component---src-pages-404-js-ec5d679138bb835ff77f.js.map -------------------------------------------------------------------------------- /docs/component---src-pages-404-js-ec5d679138bb835ff77f.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["webpack:///./src/pages/404.js"],"names":["style","display","alignItems","justifyContent","height","width","fontSize"],"mappings":"kHAeA,UAbiB,WAUf,OAAO,mBAAKA,MATE,CACZC,QADY,OAEZC,WAFY,SAGZC,eAHY,SAIZC,OAJY,QAKZC,MALY,QAMZC,SAAU,KAGZ","file":"component---src-pages-404-js-ec5d679138bb835ff77f.js","sourcesContent":["import * as React from 'react'\n\nconst NotFound = () => {\n const style = {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n height: '100vh',\n width: '100vw',\n fontSize: 32,\n }\n\n return
Not Found
\n}\n\nexport default NotFound\n"],"sourceRoot":""} -------------------------------------------------------------------------------- /docs/framework-e2acee0b7afcb49ae215.js.LICENSE.txt: -------------------------------------------------------------------------------- 1 | /** @license React v0.19.1 2 | * scheduler.production.min.js 3 | * 4 | * Copyright (c) Facebook, Inc. and its affiliates. 5 | * 6 | * This source code is licensed under the MIT license found in the 7 | * LICENSE file in the root directory of this source tree. 8 | */ 9 | 10 | /** @license React v16.13.1 11 | * react-dom.production.min.js 12 | * 13 | * Copyright (c) Facebook, Inc. and its affiliates. 14 | * 15 | * This source code is licensed under the MIT license found in the 16 | * LICENSE file in the root directory of this source tree. 17 | */ 18 | 19 | /** @license React v16.13.1 20 | * react.production.min.js 21 | * 22 | * Copyright (c) Facebook, Inc. and its affiliates. 23 | * 24 | * This source code is licensed under the MIT license found in the 25 | * LICENSE file in the root directory of this source tree. 26 | */ 27 | -------------------------------------------------------------------------------- /docs/page-data/404.html/page-data.json: -------------------------------------------------------------------------------- 1 | {"componentChunkName":"component---src-pages-404-js","path":"/404.html","result":{"pageContext":{}},"staticQueryHashes":[]} -------------------------------------------------------------------------------- /docs/page-data/404/page-data.json: -------------------------------------------------------------------------------- 1 | {"componentChunkName":"component---src-pages-404-js","path":"/404/","result":{"pageContext":{}},"staticQueryHashes":[]} -------------------------------------------------------------------------------- /docs/page-data/app-data.json: -------------------------------------------------------------------------------- 1 | {"webpackCompilationHash":"07f321a89cc9eb321fc2"} 2 | -------------------------------------------------------------------------------- /docs/page-data/index/page-data.json: -------------------------------------------------------------------------------- 1 | {"componentChunkName":"component---src-example-mdx","path":"/","result":{"pageContext":{"frontmatter":{"name":"React Tiny Fab","route":"/"},"entry":{"id":"d3be5c520c8cc3bdd6ff5a49f9353d7b","filepath":"src/example.mdx","fullpath":"/Users/dericcain/Code/react-tiny-fab/src/example.mdx","route":"/","slug":"src-example","name":"React Tiny Fab","menu":"","headings":[{"slug":"install","depth":2,"value":"Install"},{"slug":"usage","depth":2,"value":"Usage"},{"slug":"example","depth":2,"value":"Example"},{"slug":"components","depth":2,"value":"Components"},{"slug":"fab-","depth":3,"value":""},{"slug":"props","depth":4,"value":"Props"},{"slug":"action-","depth":3,"value":""},{"slug":"props-1","depth":4,"value":"Props"},{"slug":"demo","depth":2,"value":"Demo"},{"slug":"contributing","depth":2,"value":"Contributing"},{"slug":"running-the-dev-environment","depth":3,"value":"Running the dev environment"},{"slug":"testing","depth":3,"value":"Testing"},{"slug":"issues","depth":2,"value":"Issues"},{"slug":"license-mit","depth":2,"value":"License (MIT)"}]}}},"staticQueryHashes":["1635659820"]} -------------------------------------------------------------------------------- /docs/page-data/readme/page-data.json: -------------------------------------------------------------------------------- 1 | {"componentChunkName":"component---readme-md","path":"/readme","result":{"pageContext":{"frontmatter":{},"entry":{"id":"04c6e90faac2675aa89e2176d2eec7d8","filepath":"README.md","fullpath":"/Users/dericcain/Code/react-tiny-fab/README.md","route":"/readme","slug":"readme","name":"Readme","menu":"","headings":[{"slug":"docs","depth":2,"value":"Docs"},{"slug":"issues","depth":2,"value":"Issues"},{"slug":"license-mit","depth":2,"value":"License (MIT)"}]}}},"staticQueryHashes":["1635659820"]} -------------------------------------------------------------------------------- /docs/readme/index.html: -------------------------------------------------------------------------------- 1 | Readme | React Tiny Fab
React Tiny Fab
Edit page
React Tiny FabReadmeDocsIssuesLicense (MIT)

<img alt="React Tiny FAB" src="https://raw.githubusercontent.com/dericgw/react-tiny-fab/master/logo.png" />

A tiny (~700 byte gzip) WAI-ARIA compliant Floating Action Button for React

react-tiny-fab v3 now relies on React version 16.8 and up because it is implemented using React Hooks

Want to use a Floating Action Button without having to import the whole Material Design Components library? Weighing in 2 | at only around 671 bytes gzipped, React Tiny FAB is a great solution. It is a lightweight, fast, and flexible component.

<img alt="React Tiny FAB" src="https://raw.githubusercontent.com/dericgw/react-tiny-fab/master/fab.gif" />

Docs

Please visit here for docs: https://dericgw.github.io/react-tiny-fab

Issues

If you find an issue, head over to the Issues section and let me 3 | know about it. If you want to be super cool, you can submit a PR that fixes the issue.

License (MIT)

Check it out here.

-------------------------------------------------------------------------------- /docs/static/css/src-example.6a6391bdacfae9c0dcbe.css: -------------------------------------------------------------------------------- 1 | .rtf{box-sizing:border-box;margin:25px;position:fixed;white-space:nowrap;z-index:9998;padding-left:0;list-style:none}.rtf.open .rtf--mb>*{transform-origin:center center;transform:rotate(315deg);transition:transform .2s ease-in-out}.rtf.open .rtf--mb>ul{list-style:none;margin:0;padding:0}.rtf.open .rtf--ab__c:hover>span,.rtf.open .rtf--ab__c>span.always-show{transition:opacity .2s ease-in-out;opacity:.9}.rtf.open .rtf--ab__c:first-child{transform:translateY(-60px) scale(1);transition-delay:.03s}.rtf.open .rtf--ab__c:first-child.top{transform:translateY(60px) scale(1)}.rtf.open .rtf--ab__c:nth-child(2){transform:translateY(-120px) scale(1);transition-delay:.09s}.rtf.open .rtf--ab__c:nth-child(2).top{transform:translateY(120px) scale(1)}.rtf.open .rtf--ab__c:nth-child(3){transform:translateY(-180px) scale(1);transition-delay:.12s}.rtf.open .rtf--ab__c:nth-child(3).top{transform:translateY(180px) scale(1)}.rtf.open .rtf--ab__c:nth-child(4){transform:translateY(-240px) scale(1);transition-delay:.15s}.rtf.open .rtf--ab__c:nth-child(4).top{transform:translateY(240px) scale(1)}.rtf.open .rtf--ab__c:nth-child(5){transform:translateY(-300px) scale(1);transition-delay:.18s}.rtf.open .rtf--ab__c:nth-child(5).top{transform:translateY(300px) scale(1)}.rtf.open .rtf--ab__c:nth-child(6){transform:translateY(-360px) scale(1);transition-delay:.21s}.rtf.open .rtf--ab__c:nth-child(6).top{transform:translateY(360px) scale(1)}.rtf--mb__c{padding:25px;margin:-25px}.rtf--mb__c :last-child{margin-bottom:0}.rtf--mb__c:hover>span,.rtf--mb__c>span.always-show{transition:opacity .2s ease-in-out;opacity:.9}.rtf--mb__c>span{opacity:0;transition:opacity .2s ease-in-out;position:absolute;top:50%;transform:translateY(-50%);margin-right:6px;margin-left:4px;background:rgba(0,0,0,.75);padding:2px 4px;border-radius:2px;color:#fff;font-size:13px;box-shadow:0 0 4px rgba(0,0,0,.14),0 4px 8px rgba(0,0,0,.28)}.rtf--mb__c>span.right{right:100%}.rtf--mb{height:56px;width:56px;z-index:9999;background-color:#666;display:inline-flex;justify-content:center;align-items:center;position:relative;border:none;border-radius:50%;box-shadow:0 0 4px rgba(0,0,0,.14),0 4px 8px rgba(0,0,0,.28);cursor:pointer;outline:none;padding:0;-webkit-user-drag:none;font-weight:700;color:#f1f1f1;font-size:18px}.rtf--ab__c,.rtf--mb>*{transition:transform .2s ease-in-out}.rtf--ab__c{display:block;position:absolute;top:0;right:1px;padding:10px 0;margin:-10px 0}.rtf--ab__c>span{opacity:0;transition:opacity .2s ease-in-out;position:absolute;top:50%;transform:translateY(-50%);margin-right:6px;background:rgba(0,0,0,.75);padding:2px 4px;border-radius:2px;color:#fff;font-size:13px;box-shadow:0 0 4px rgba(0,0,0,.14),0 4px 8px rgba(0,0,0,.28)}.rtf--ab__c>span.right{right:100%}.rtf--ab__c:first-child{transform:translateY(-60px) scale(0);transition-delay:.21s}.rtf--ab__c:first-child.top{transform:translateY(60px) scale(0)}.rtf--ab__c:nth-child(2){transform:translateY(-120px) scale(0);transition-delay:.18s}.rtf--ab__c:nth-child(2).top{transform:translateY(120px) scale(0)}.rtf--ab__c:nth-child(3){transform:translateY(-180px) scale(0);transition-delay:.15s}.rtf--ab__c:nth-child(3).top{transform:translateY(180px) scale(0)}.rtf--ab__c:nth-child(4){transform:translateY(-240px) scale(0);transition-delay:.12s}.rtf--ab__c:nth-child(4).top{transform:translateY(240px) scale(0)}.rtf--ab__c:nth-child(5){transform:translateY(-300px) scale(0);transition-delay:.09s}.rtf--ab__c:nth-child(5).top{transform:translateY(300px) scale(0)}.rtf--ab__c:nth-child(6){transform:translateY(-360px) scale(0);transition-delay:.03s}.rtf--ab__c:nth-child(6).top{transform:translateY(360px) scale(0)}.rtf--ab{height:48px;width:48px;background-color:#aaa;display:inline-flex;justify-content:center;align-items:center;position:relative;border:none;border-radius:50%;box-shadow:0 0 4px rgba(0,0,0,.14),0 4px 8px rgba(0,0,0,.28);cursor:pointer;outline:none;padding:0;-webkit-user-drag:none;font-weight:700;color:#f1f1f1;margin-right:4px;font-size:16px;z-index:10000} -------------------------------------------------------------------------------- /docs/static/js/app.6a6391bdacfae9c0dcbe.js: -------------------------------------------------------------------------------- 1 | !function(e){function n(n){for(var r,o,i=n[0],a=n[1],c=n[2],d=n[3]||[],s=0,u=[];s=0&&t._disposeHandlers.splice(n,1)},invalidate:function(){switch(this._selfInvalidated=!0,p){case"idle":(v={})[n]=e[n],f("ready");break;case"ready":I(n);break;case"prepare":case"check":case"dispose":case"apply":(y=y||[]).push(n)}},check:_,apply:D,status:function(e){if(!e)return p;l.push(e)},addStatusHandler:function(e){l.push(e)},removeStatusHandler:function(e){var n=l.indexOf(e);n>=0&&l.splice(n,1)},data:c[n]};return o=void 0,t}var l=[],p="idle";function f(e){p=e;for(var n=0;n0;){var o=r.pop(),i=o.id,a=o.chain;if((u=A[i])&&(!u.hot._selfAccepted||u.hot._selfInvalidated)){if(u.hot._selfDeclined)return{type:"self-declined",chain:a,moduleId:i};if(u.hot._main)return{type:"unaccepted",chain:a,moduleId:i};for(var c=0;c ")),j.type){case"self-declined":t.onDeclined&&t.onDeclined(j),t.ignoreDeclined||(P=new Error("Aborted because of self decline: "+j.moduleId+H));break;case"declined":t.onDeclined&&t.onDeclined(j),t.ignoreDeclined||(P=new Error("Aborted because of declined dependency: "+j.moduleId+" in "+j.parentId+H));break;case"unaccepted":t.onUnaccepted&&t.onUnaccepted(j),t.ignoreUnaccepted||(P=new Error("Aborted because "+l+" is not accepted"+H));break;case"accepted":t.onAccepted&&t.onAccepted(j),D=!0;break;case"disposed":t.onDisposed&&t.onDisposed(j),I=!0;break;default:throw new Error("Unexception type "+j.type)}if(P)return f("abort"),Promise.reject(P);if(D)for(l in w[l]=v[l],h(b,j.outdatedModules),j.outdatedDependencies)Object.prototype.hasOwnProperty.call(j.outdatedDependencies,l)&&(g[l]||(g[l]=[]),h(g[l],j.outdatedDependencies[l]));I&&(h(b,[j.moduleId]),w[l]=O)}var M,T=[];for(i=0;i0;)if(l=U.pop(),u=A[l]){var N={},z=u.hot._disposeHandlers;for(s=0;s=0&&L.parents.splice(M,1))}}for(l in g)if(Object.prototype.hasOwnProperty.call(g,l)&&(u=A[l]))for(R=g[l],s=0;s=0&&u.children.splice(M,1);f("apply"),void 0!==m&&(a=m,m=void 0);for(l in v=void 0,w)Object.prototype.hasOwnProperty.call(w,l)&&(e[l]=w[l]);var B=null;for(l in g)if(Object.prototype.hasOwnProperty.call(g,l)&&(u=A[l])){R=g[l];var F=[];for(i=0;i"},{"slug":"props","depth":4,"value":"Props"},{"slug":"action-","depth":3,"value":""},{"slug":"props-1","depth":4,"value":"Props"},{"slug":"demo","depth":2,"value":"Demo"},{"slug":"contributing","depth":2,"value":"Contributing"},{"slug":"running-the-dev-environment","depth":3,"value":"Running the dev environment"},{"slug":"testing","depth":3,"value":"Testing"},{"slug":"issues","depth":2,"value":"Issues"},{"slug":"license-mit","depth":2,"value":"License (MIT)"}]}}]}')},"./.docz/app/index.jsx":function(e,n,t){"use strict";t.r(n);var r=t("./node_modules/react/index.js"),o=t.n(r),i=t("./node_modules/react-dom/index.js"),a=t.n(i),c=t("./node_modules/docz/dist/index.esm.js"),d=t("./node_modules/docz-theme-default/dist/index.esm.js"),s={"src/example.mdx":function(){return Promise.all([t.e(0),t.e(2)]).then(t.bind(null,"./src/example.mdx"))}},u=t("./.docz/app/db.json"),l=function(){return o.a.createElement(d.a,{linkComponent:c.b,db:u},o.a.createElement(c.d,{imports:s}))},p=[],f=[],h=function(){return p.forEach((function(e){return e&&e()}))},v=function(){return f.forEach((function(e){return e&&e()}))},m=document.querySelector("#root");!function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:l;h(),a.a.render(o.a.createElement(e,null),m,v)}(l)},0:function(e,n,t){e.exports=t("./.docz/app/index.jsx")}}); 2 | //# sourceMappingURL=app.6a6391bdacfae9c0dcbe.js.map -------------------------------------------------------------------------------- /docs/styles-bc72ca78f9bad9fb1f45.js: -------------------------------------------------------------------------------- 1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[9],[]]); 2 | //# sourceMappingURL=styles-bc72ca78f9bad9fb1f45.js.map -------------------------------------------------------------------------------- /docs/styles-bc72ca78f9bad9fb1f45.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":[],"names":[],"mappings":"","file":"styles-bc72ca78f9bad9fb1f45.js","sourceRoot":""} -------------------------------------------------------------------------------- /docs/styles.dfd529f93c706bbf78a0.css: -------------------------------------------------------------------------------- 1 | @import url(https://fonts.googleapis.com/css?family=Inconsolata&display=swap);@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro&display=swap);.rtf{box-sizing:border-box;margin:25px;position:fixed;white-space:nowrap;z-index:9998;padding-left:0;list-style:none}.rtf.open .rtf--mb>*{transform-origin:center center;transform:rotate(315deg);transition:transform .2s ease-in-out}.rtf.open .rtf--mb>ul{list-style:none;margin:0;padding:0}.rtf.open .rtf--ab__c:hover>span,.rtf.open .rtf--ab__c>span.always-show{transition:opacity .2s ease-in-out;opacity:.9}.rtf.open .rtf--ab__c:first-child{transform:translateY(-60px) scale(1);transition-delay:.03s}.rtf.open .rtf--ab__c:first-child.top{transform:translateY(60px) scale(1)}.rtf.open .rtf--ab__c:nth-child(2){transform:translateY(-120px) scale(1);transition-delay:.09s}.rtf.open .rtf--ab__c:nth-child(2).top{transform:translateY(120px) scale(1)}.rtf.open .rtf--ab__c:nth-child(3){transform:translateY(-180px) scale(1);transition-delay:.12s}.rtf.open .rtf--ab__c:nth-child(3).top{transform:translateY(180px) scale(1)}.rtf.open .rtf--ab__c:nth-child(4){transform:translateY(-240px) scale(1);transition-delay:.15s}.rtf.open .rtf--ab__c:nth-child(4).top{transform:translateY(240px) scale(1)}.rtf.open .rtf--ab__c:nth-child(5){transform:translateY(-300px) scale(1);transition-delay:.18s}.rtf.open .rtf--ab__c:nth-child(5).top{transform:translateY(300px) scale(1)}.rtf.open .rtf--ab__c:nth-child(6){transform:translateY(-360px) scale(1);transition-delay:.21s}.rtf.open .rtf--ab__c:nth-child(6).top{transform:translateY(360px) scale(1)}.rtf--mb__c{padding:25px;margin:-25px}.rtf--mb__c :last-child{margin-bottom:0}.rtf--mb__c:hover>span,.rtf--mb__c>span.always-show{transition:opacity .2s ease-in-out;opacity:.9}.rtf--mb__c>span{opacity:0;transition:opacity .2s ease-in-out;position:absolute;top:50%;transform:translateY(-50%);margin-right:6px;margin-left:4px;background:rgba(0,0,0,.75);padding:2px 4px;border-radius:2px;color:#fff;font-size:13px;box-shadow:0 0 4px rgba(0,0,0,.14),0 4px 8px rgba(0,0,0,.28)}.rtf--mb__c>span.right{right:100%}.rtf--mb{height:56px;width:56px;z-index:9999;background-color:#666;display:inline-flex;justify-content:center;align-items:center;position:relative;border:none;border-radius:50%;box-shadow:0 0 4px rgba(0,0,0,.14),0 4px 8px rgba(0,0,0,.28);cursor:pointer;outline:none;padding:0;-webkit-user-drag:none;font-weight:700;color:#f1f1f1;font-size:18px}.rtf--ab__c,.rtf--mb>*{transition:transform .2s ease-in-out}.rtf--ab__c{display:block;position:absolute;top:0;right:1px;padding:10px 0;margin:-10px 0}.rtf--ab__c>span{opacity:0;transition:opacity .2s ease-in-out;position:absolute;top:50%;transform:translateY(-50%);margin-right:6px;background:rgba(0,0,0,.75);padding:2px 4px;border-radius:2px;color:#fff;font-size:13px;box-shadow:0 0 4px rgba(0,0,0,.14),0 4px 8px rgba(0,0,0,.28)}.rtf--ab__c>span.right{right:100%}.rtf--ab__c:first-child{transform:translateY(-60px) scale(0);transition-delay:.21s}.rtf--ab__c:first-child.top{transform:translateY(60px) scale(0)}.rtf--ab__c:nth-child(2){transform:translateY(-120px) scale(0);transition-delay:.18s}.rtf--ab__c:nth-child(2).top{transform:translateY(120px) scale(0)}.rtf--ab__c:nth-child(3){transform:translateY(-180px) scale(0);transition-delay:.15s}.rtf--ab__c:nth-child(3).top{transform:translateY(180px) scale(0)}.rtf--ab__c:nth-child(4){transform:translateY(-240px) scale(0);transition-delay:.12s}.rtf--ab__c:nth-child(4).top{transform:translateY(240px) scale(0)}.rtf--ab__c:nth-child(5){transform:translateY(-300px) scale(0);transition-delay:.09s}.rtf--ab__c:nth-child(5).top{transform:translateY(300px) scale(0)}.rtf--ab__c:nth-child(6){transform:translateY(-360px) scale(0);transition-delay:.03s}.rtf--ab__c:nth-child(6).top{transform:translateY(360px) scale(0)}.rtf--ab{height:48px;width:48px;background-color:#aaa;display:inline-flex;justify-content:center;align-items:center;position:relative;border:none;border-radius:50%;box-shadow:0 0 4px rgba(0,0,0,.14),0 4px 8px rgba(0,0,0,.28);cursor:pointer;outline:none;padding:0;-webkit-user-drag:none;font-weight:700;color:#f1f1f1;margin-right:4px;font-size:16px;z-index:10000} -------------------------------------------------------------------------------- /docs/webpack-runtime-195f415acf43a6365648.js: -------------------------------------------------------------------------------- 1 | !function(e){function r(r){for(var n,c,u=r[0],i=r[1],f=r[2],p=0,d=[];p 2 | 3 | 4 | 5 | 6 | React Tiny FAB Example 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 44 | 49 | 221 | 222 | 223 | -------------------------------------------------------------------------------- /example/serve.json: -------------------------------------------------------------------------------- 1 | { 2 | "cleanUrls": true, 3 | "renderSingle": true 4 | } 5 | -------------------------------------------------------------------------------- /fab.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dericcain/react-tiny-fab/58f780e1cfe71976ab57983e30801e6b104b697c/fab.gif -------------------------------------------------------------------------------- /gatsby-config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: ['gatsby-plugin-sass', 'gatsby-theme-docz'], 3 | } 4 | -------------------------------------------------------------------------------- /jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | moduleNameMapper: { 3 | "\\.scss$": "/__mocks__/styles.js", 4 | }, 5 | }; 6 | -------------------------------------------------------------------------------- /logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dericcain/react-tiny-fab/58f780e1cfe71976ab57983e30801e6b104b697c/logo.png -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-tiny-fab", 3 | "description": "A tiny Floating Action Button for React.", 4 | "version": "4.0.4", 5 | "license": "MIT", 6 | "author": "Deric Cain ", 7 | "repository": { 8 | "type": "git", 9 | "url": "https://github.com/dericgw/react-tiny-fab.git" 10 | }, 11 | "bugs": { 12 | "url": "https://github.com/dericgw/react-tiny-fab/issues" 13 | }, 14 | "homepage": "https://github.com/dericgw/react-tiny-fab", 15 | "keywords": [ 16 | "react", 17 | "material", 18 | "fab", 19 | "floating action button", 20 | "material design", 21 | "components", 22 | "floating button" 23 | ], 24 | "main": "dist/index.js", 25 | "typings": "dist/index.d.ts", 26 | "files": [ 27 | "dist", 28 | "src" 29 | ], 30 | "engines": { 31 | "node": ">=10" 32 | }, 33 | "scripts": { 34 | "start": "tsdx watch", 35 | "build": "tsdx build", 36 | "test": "tsdx test --passWithNoTests", 37 | "lint": "tsdx lint", 38 | "prepare": "tsdx build", 39 | "size": "size-limit", 40 | "analyze": "size-limit --why", 41 | "docs": "docz dev", 42 | "docs:build": "docz build", 43 | "prestart:example": "tsdx build", 44 | "start:example": "serve example" 45 | }, 46 | "peerDependencies": { 47 | "react": ">=16.8" 48 | }, 49 | "husky": { 50 | "hooks": { 51 | "pre-commit": "tsdx lint --fix && git add ." 52 | } 53 | }, 54 | "prettier": { 55 | "printWidth": 100, 56 | "semi": true, 57 | "singleQuote": true, 58 | "trailingComma": "all" 59 | }, 60 | "module": "dist/react-tiny-fab.esm.js", 61 | "size-limit": [ 62 | { 63 | "path": "dist/react-tiny-fab.cjs.production.min.js", 64 | "limit": "2 KB" 65 | }, 66 | { 67 | "path": "dist/react-tiny-fab.esm.js", 68 | "limit": "2 KB" 69 | } 70 | ], 71 | "devDependencies": { 72 | "@size-limit/preset-small-lib": "^4.6.0", 73 | "@testing-library/jest-dom": "^5.11.4", 74 | "@testing-library/react": "^11.0.4", 75 | "@types/react": "^16.9.49", 76 | "@types/react-dom": "^16.9.8", 77 | "docz": "^2.3.1", 78 | "docz-theme-default": "^1.2.0", 79 | "gatsby-plugin-sass": "^2.3.14", 80 | "gatsby-theme-docz": "^2.3.1", 81 | "husky": "^4.3.0", 82 | "identity-obj-proxy": "^3.0.0", 83 | "node-sass": "^4.14.1", 84 | "react": "16.13.1", 85 | "react-dom": "16.13.1", 86 | "rollup-plugin-postcss": "^3.1.8", 87 | "rollup-plugin-scss": "^2.6.1", 88 | "serve": "^11.3.2", 89 | "size-limit": "^4.6.0", 90 | "tsdx": "^0.14.0", 91 | "tslib": "^2.0.1", 92 | "typescript": "^4.0.3" 93 | } 94 | } 95 | -------------------------------------------------------------------------------- /src/example.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | name: React Tiny Fab 3 | route: / 4 | --- 5 | 6 | import { Fab, Action } from './index.tsx'; 7 | import './styles.scss'; 8 | 9 | 10 | 11 | > A tiny (~700 byte gzip) WAI-ARIA compliant Floating Action Button for React 12 | 13 | ## Install 14 | ``` 15 | npm install react-tiny-fab 16 | yarn add react-tiny-fab 17 | ``` 18 | 19 | > `react-tiny-fab` v3 and up now relies on React version 16.8 and up because it is implemented using [React Hooks](https://reactjs.org/docs/hooks-intro.html) 20 | 21 | ## Usage 22 | There are two components available for import - `Fab` and `Action`. You import them like this: 23 | ``` 24 | import { Fab, Action } from 'react-tiny-fab'; 25 | import 'react-tiny-fab/dist/styles.css'; 26 | ``` 27 | 28 | ## Example 29 | 30 | > Check the bottom right of the screen 31 | 32 | +} mainButtonStyles={{backgroundColor: '#e74c3c'}}> 33 | alert('It works!')}> 34 | + 35 | 36 | alert('It still works!')}> 37 | = 38 | 39 | 40 | 41 | Here is an example of how you would use the components: 42 | ```js 43 | // The Fab is the main button. Pass any component to the icon prop and choose 44 | // either click or hover for the event (default is hover) 45 | } 50 | event={event} 51 | alwaysShowTitle={true} 52 | onClick={someFunctionForTheMainButton} 53 | > 54 | // The Action components are the "buttons" that appear when the Fab is open. You can use the out-of-the-box Action 55 | // component or you can use a custom component of any type and style it any way that you'd like. The "text" prop 56 | // is the popup label that appears when the Action component is hovered. 57 | 61 | 65 | 66 | 67 | // Using a custom component for this one. See another example in "example/src/index.js" 68 | 72 | 73 | 74 | 75 | ``` 76 | 77 | ## Components 78 | ### `` 79 | This is the main component that controls the Floating Action Button. 80 | 81 | #### Props 82 | | Prop | Type | Default | Required | Description | 83 | |----------------------|----------------------------|-------------------------- |----------|--------------------------------------------------------------------------------------------------------------------------------------------| 84 | | `mainButtonStyles` | React.CSSProperties | {} | false | This object is passed to the main button's `style` prop so use React styles to style the button. | 85 | | `style` | React.CSSProperties | `{ bottom: 24, right: 24 }` | false | How do you want to style the FAB, specifically the position of the FAB? Use `top`, `left`, `bottom`, `right` properties to declare where you want the FAB to be positioned as well as any other styles. | 86 | | `icon` | React Element/Component | | true | This element/component will be the used as the icon for the main button. This can be text, or a Font Awesome icon, or any other component. | 87 | | `event` | 'hover' | 'click' | 'hover' | false | What type of event do you want to make the FAB menu active? This can be either `click` or `hover`. | 88 | | `children` | React Element/Component | | false | This is the children that will be mapped and rendered. This can be anything. There can be up to 6, but no more than 6. An `Action` component is provided out of the box. | 89 | | `alwaysShowTitle` | boolean | false | false | If the title of the `Action` component should always be shown (not just on hover), set this to true and the title will always be shown | 90 | | `onClick` | function | null | false | If you only need to use the main button for something, then you can attach an `onClick` handler to the main button. The React Synthetic Event will be passed in just like a normal `onClick` | 91 | | `text` | string | null | false | If you attach an `onClick` handler to the main button, then the original `Action` components would not show. Instead you can attach `text` to display while user hover the FAB | 92 | | `...props` | Anything | | false | Anything you can add to a React component, you can add here. | 93 | > Based on the `position` prop, the FAB will figure out the direction of the `` `text` and also which way to 94 | > expand when hovered/clicked (up or down). 95 | 96 | ### `` 97 | This component represents the smaller buttons that appear when the main button is hovered/clicked. Now, you do not have 98 | to use this component. You can use your own custom component(s) and create something totally different than a Floating 99 | Action Button. For instance, you could create your own "Support Button" that when clicked, will display a chat box or 100 | some type of form that submits a contact request. 101 | 102 | #### Props 103 | | Prop | Type | Default | Required | Description | 104 | |------------|-------------------------|---------|----------|------------------------------------------------------------------------------| 105 | | `text` | string | "" | false | This is the text that will be displayed when one of the actions is hovered. | 106 | | `children` | React Element/Component | | false | This will be the icon/text for the action. | 107 | | `...props` | Anything | | false | Anything you can add to a React component, you can add here, e.g. (`onClick`, `style`, etc.) | 108 | 109 | ## Demo 110 | Check out the `index.html` file in the `example` folder for an example of the traditional FAB and also a form pop-up that could be used to send contact information, or something else. 111 | 112 | ## Contributing 113 | If you find a bug, submit an issue with enough information to reproduce the bug. If you have a fix, please do not hesitate to submit a PR. If you feel that the API needs to be modified, open an issue so that we can discuss it first. 114 | 115 | ### Running the dev environment 116 | 117 | 1. Clone the repo - `git clone https://github.com/dericgw/react-tiny-fab.git` && `cd react-tiny-fab` 118 | 2. Install the dependencies - `npm i` 119 | 3. Run the example - `npm start` _Visit http://localhost:5000_ 120 | 121 | Once you get that going, you should be able to make changes and the page should refresh automatically when those changes are saved. 122 | 123 | ### Testing 124 | This package is only one JS file and it is tested pretty good. Make sure that none of the tests are breaking if changes 125 | are made. Also, if you add new functionality and it *warrants* testing, please add tests. If you need help with this, I 126 | will gladly help. 127 | 128 | ## Issues 129 | If you find an issue, head over to the Issues section and let me know about it. If you want to be super cool, you can submit a PR that fixes the issue. 130 | 131 | ## License (MIT) 132 | [Check it out here.](https://github.com/dericgw/react-tiny-fab/blob/master/LICENSE) 133 | -------------------------------------------------------------------------------- /src/index.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | 3 | import './styles.scss'; 4 | 5 | interface ABProps extends React.HTMLAttributes { 6 | text?: string; 7 | onClick?: (e: React.FormEvent) => void; 8 | 'data-testid'?: string; 9 | } 10 | 11 | const AB: React.FC = ({ children, ...p }) => ( 12 | 15 | ); 16 | 17 | interface MBProps extends Omit, 'tabIndex'> { 18 | tabIndex?: number; 19 | } 20 | 21 | export const MB: React.FC = ({ children, ...p }) => ( 22 | 25 | ); 26 | 27 | const defaultStyles: React.CSSProperties = { bottom: 24, right: 24 }; 28 | 29 | interface FabProps { 30 | event?: 'hover' | 'click'; 31 | style?: React.CSSProperties; 32 | alwaysShowTitle?: boolean; 33 | icon?: React.ReactNode; 34 | mainButtonStyles?: React.CSSProperties; 35 | onClick?: (e: React.FormEvent) => void; 36 | text?: string; 37 | children?: React.ReactNode; 38 | } 39 | 40 | const Fab: React.FC = ({ 41 | event = 'hover', 42 | style = defaultStyles, 43 | alwaysShowTitle = false, 44 | children, 45 | icon, 46 | mainButtonStyles, 47 | onClick, 48 | text, 49 | ...p 50 | }) => { 51 | const [isOpen, setIsOpen] = useState(false); 52 | const ariaHidden = alwaysShowTitle || !isOpen; 53 | const interpolatedEvent = typeof window !== 'undefined' ? 'ontouchstart' in window ? 'click' : event : event; 54 | const open = () => setIsOpen(true); 55 | const close = () => setIsOpen(false); 56 | const enter = () => interpolatedEvent === 'hover' && open(); 57 | const leave = () => interpolatedEvent === 'hover' && close(); 58 | const toggle = (e: React.FormEvent) => { 59 | if (onClick) { 60 | return onClick(e); 61 | } 62 | e.persist(); 63 | return interpolatedEvent === 'click' ? (isOpen ? close() : open()) : null; 64 | }; 65 | 66 | const actionOnClick = (e: React.FormEvent, userFunc: (e: React.FormEvent) => void) => { 67 | e.persist(); 68 | setIsOpen(false); 69 | setTimeout(() => { 70 | userFunc(e); 71 | }, 1); 72 | }; 73 | 74 | const rc = () => 75 | React.Children.map(children, (ch, i) => { 76 | if (React.isValidElement(ch)) { 77 | return ( 78 |
  • 79 | {React.cloneElement(ch, { 80 | 'data-testid': `action-button-${i}`, 81 | 'aria-label': ch.props.text || `Menu button ${i + 1}`, 82 | 'aria-hidden': ariaHidden, 83 | tabIndex: isOpen ? 0 : -1, 84 | ...ch.props, 85 | onClick: (e: React.FormEvent) => { 86 | if (ch.props.onClick) actionOnClick(e, ch.props.onClick); 87 | }, 88 | })} 89 | {ch.props.text && ( 90 | 96 | {ch.props.text} 97 | 98 | )} 99 |
    • 100 | ); 101 | } 102 | return null; 103 | }); 104 | 105 | return ( 106 |
      114 |
    • 115 | 123 | {icon} 124 | 125 | {text && ( 126 | 130 | {text} 131 | 132 | )} 133 |
        {rc()}
      134 |
      • 135 |
    136 | ); 137 | }; 138 | 139 | export { Fab, AB as Action }; 140 | -------------------------------------------------------------------------------- /src/styles.scss: -------------------------------------------------------------------------------- 1 | .rtf { 2 | box-sizing: border-box; 3 | margin: 25px; 4 | position: fixed; 5 | white-space: nowrap; 6 | z-index: 9998; 7 | padding-left: 0; 8 | list-style: none; 9 | &.open { 10 | .rtf--mb { 11 | > * { 12 | transform-origin: center center; 13 | transform: rotate(315deg); 14 | transition: ease-in-out transform 0.2s; 15 | } 16 | > ul { 17 | list-style: none; 18 | margin: 0; 19 | padding: 0; 20 | } 21 | } 22 | .rtf--ab__c { 23 | &:hover { 24 | > span { 25 | transition: ease-in-out opacity 0.2s; 26 | opacity: 0.9; 27 | } 28 | } 29 | > span.always-show { 30 | transition: ease-in-out opacity 0.2s; 31 | opacity: 0.9; 32 | } 33 | &:nth-child(1) { 34 | transform: translateY(-60px) scale(1); 35 | transition-delay: 0.03s; 36 | &.top { 37 | transform: translateY(60px) scale(1); 38 | } 39 | } 40 | &:nth-child(2) { 41 | transform: translateY(-120px) scale(1); 42 | transition-delay: 0.09s; 43 | &.top { 44 | transform: translateY(120px) scale(1); 45 | } 46 | } 47 | &:nth-child(3) { 48 | transform: translateY(-180px) scale(1); 49 | transition-delay: 0.12s; 50 | &.top { 51 | transform: translateY(180px) scale(1); 52 | } 53 | } 54 | &:nth-child(4) { 55 | transform: translateY(-240px) scale(1); 56 | transition-delay: 0.15s; 57 | &.top { 58 | transform: translateY(240px) scale(1); 59 | } 60 | } 61 | &:nth-child(5) { 62 | transform: translateY(-300px) scale(1); 63 | transition-delay: 0.18s; 64 | &.top { 65 | transform: translateY(300px) scale(1); 66 | } 67 | } 68 | &:nth-child(6) { 69 | transform: translateY(-360px) scale(1); 70 | transition-delay: 0.21s; 71 | &.top { 72 | transform: translateY(360px) scale(1); 73 | } 74 | } 75 | } 76 | } 77 | } 78 | 79 | .rtf--mb__c { 80 | padding: 25px; 81 | margin: -25px; 82 | *:last-child { 83 | margin-bottom: 0; 84 | } 85 | &:hover { 86 | > span { 87 | transition: ease-in-out opacity 0.2s; 88 | opacity: 0.9; 89 | } 90 | } 91 | > span.always-show { 92 | transition: ease-in-out opacity 0.2s; 93 | opacity: 0.9; 94 | } 95 | > span { 96 | opacity: 0; 97 | transition: ease-in-out opacity 0.2s; 98 | position: absolute; 99 | top: 50%; 100 | transform: translateY(-50%); 101 | margin-right: 6px; 102 | margin-left: 4px; 103 | background: rgba(0, 0, 0, 0.75); 104 | padding: 2px 4px; 105 | border-radius: 2px; 106 | color: white; 107 | font-size: 13px; 108 | box-shadow: 0 0 4px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.28); 109 | &.right { 110 | right: 100%; 111 | } 112 | } 113 | } 114 | 115 | .rtf--mb { 116 | height: 56px; 117 | width: 56px; 118 | z-index: 9999; 119 | background-color: #666666; 120 | display: inline-flex; 121 | justify-content: center; 122 | align-items: center; 123 | position: relative; 124 | border: none; 125 | border-radius: 50%; 126 | box-shadow: 0 0 4px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.28); 127 | cursor: pointer; 128 | outline: none; 129 | padding: 0; 130 | -webkit-user-drag: none; 131 | font-weight: bold; 132 | color: #f1f1f1; 133 | font-size: 18px; 134 | > * { 135 | transition: ease-in-out transform 0.2s; 136 | } 137 | } 138 | 139 | .rtf--ab__c { 140 | display: block; 141 | position: absolute; 142 | top: 0; 143 | right: 1px; 144 | padding: 10px 0; 145 | margin: (-10px) 0; 146 | transition: ease-in-out transform 0.2s; 147 | > span { 148 | opacity: 0; 149 | transition: ease-in-out opacity 0.2s; 150 | position: absolute; 151 | top: 50%; 152 | transform: translateY(-50%); 153 | margin-right: 6px; 154 | background: rgba(0, 0, 0, 0.75); 155 | padding: 2px 4px; 156 | border-radius: 2px; 157 | color: white; 158 | font-size: 13px; 159 | box-shadow: 0 0 4px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.28); 160 | &.right { 161 | right: 100%; 162 | } 163 | } 164 | &:nth-child(1) { 165 | transform: translateY(-60px) scale(0); 166 | transition-delay: 0.21s; 167 | &.top { 168 | transform: translateY(60px) scale(0); 169 | } 170 | } 171 | &:nth-child(2) { 172 | transform: translateY(-120px) scale(0); 173 | transition-delay: 0.18s; 174 | &.top { 175 | transform: translateY(120px) scale(0); 176 | } 177 | } 178 | &:nth-child(3) { 179 | transform: translateY(-180px) scale(0); 180 | transition-delay: 0.15s; 181 | &.top { 182 | transform: translateY(180px) scale(0); 183 | } 184 | } 185 | &:nth-child(4) { 186 | transform: translateY(-240px) scale(0); 187 | transition-delay: 0.12s; 188 | &.top { 189 | transform: translateY(240px) scale(0); 190 | } 191 | } 192 | &:nth-child(5) { 193 | transform: translateY(-300px) scale(0); 194 | transition-delay: 0.09s; 195 | &.top { 196 | transform: translateY(300px) scale(0); 197 | } 198 | } 199 | &:nth-child(6) { 200 | transform: translateY(-360px) scale(0); 201 | transition-delay: 0.03s; 202 | &.top { 203 | transform: translateY(360px) scale(0); 204 | } 205 | } 206 | } 207 | 208 | .rtf--ab { 209 | height: 48px; 210 | width: 48px; 211 | background-color: #aaaaaa; 212 | display: inline-flex; 213 | justify-content: center; 214 | align-items: center; 215 | position: relative; 216 | border: none; 217 | border-radius: 50%; 218 | box-shadow: 0 0 4px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.28); 219 | cursor: pointer; 220 | outline: none; 221 | padding: 0; 222 | -webkit-user-drag: none; 223 | font-weight: bold; 224 | color: #f1f1f1; 225 | margin-right: 4px; 226 | font-size: 16px; 227 | z-index: 10000; 228 | } 229 | -------------------------------------------------------------------------------- /test/__snapshots__/fab.test.tsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[` [snapshot] is loaded with the default props 1`] = ` 4 | 10 | `; 11 | 12 | exports[` [snapshot] is loaded with default props 1`] = ` 13 | 19 | `; 20 | -------------------------------------------------------------------------------- /test/fab.test.tsx: -------------------------------------------------------------------------------- 1 | import '@testing-library/jest-dom'; 2 | import React from 'react'; 3 | import { fireEvent, render } from '@testing-library/react'; 4 | 5 | import { Action, Fab, MB } from '../src'; 6 | 7 | describe('', () => { 8 | describe('', () => { 9 | it('[snapshot] is loaded with default props', () => { 10 | const { container } = render(+); 11 | expect(container.firstChild).toMatchSnapshot(); 12 | }); 13 | 14 | it('should open the menu when hovered and close when exited', async () => { 15 | const { getByTestId } = render( 16 | +}> 17 | + 18 | , 19 | ); 20 | 21 | const fab = getByTestId('fab'); 22 | 23 | // Sanity check to make sure that it is in fact closed 24 | expect(fab).not.toHaveClass('rtf open'); 25 | fireEvent.mouseEnter(getByTestId('fab')); 26 | expect(fab).toHaveClass('rtf open'); 27 | fireEvent.mouseLeave(getByTestId('fab')); 28 | expect(fab).not.toHaveClass('rtf open'); 29 | }); 30 | 31 | it('should open the menu when clicked', () => { 32 | const { getByTestId } = render( 33 | +} event="click"> 34 | + 35 | , 36 | ); 37 | 38 | const fab = getByTestId('fab'); 39 | const mainButton = getByTestId('main-button'); 40 | 41 | // Sanity check... 42 | expect(fab).not.toHaveClass('rtf open'); 43 | fireEvent.click(mainButton); 44 | expect(fab).toHaveClass('rtf open'); 45 | }); 46 | 47 | it('should NOT open the menu when hovered if the event type is "click"', () => { 48 | const { getByTestId } = render( 49 | +} event="click"> 50 | + 51 | , 52 | ); 53 | 54 | const fab = getByTestId('fab'); 55 | 56 | fireEvent.mouseEnter(fab); 57 | expect(fab).not.toHaveClass('rtf open'); 58 | expect(fab).toHaveClass('rtf closed'); 59 | }); 60 | 61 | it('should NOT open the menu when clicked if the event type is "hover"', () => { 62 | const { getByTestId } = render( 63 | +} event="hover"> 64 | + 65 | , 66 | ); 67 | 68 | const fab = getByTestId('fab'); 69 | const mainButton = getByTestId('main-button'); 70 | 71 | fireEvent.click(mainButton); 72 | 73 | expect(fab).not.toHaveClass('rtf open'); 74 | expect(fab).toHaveClass('rtf closed'); 75 | }); 76 | }); 77 | 78 | describe('', () => { 79 | it('[snapshot] is loaded with the default props', () => { 80 | const { container } = render(+); 81 | expect(container.firstChild).toMatchSnapshot(); 82 | }); 83 | 84 | it('should allow the onClick handler to fire', () => { 85 | // We use a setTimeout in our onClick handler 86 | jest.useFakeTimers(); 87 | const spy = jest.fn(); 88 | const { getByTestId } = render( 89 | +} event="click"> 90 | + 91 | , 92 | ); 93 | 94 | const fab = getByTestId('fab'); 95 | const action = getByTestId('action-button-0'); 96 | 97 | fireEvent.click(fab); 98 | fireEvent.click(action); 99 | 100 | jest.runAllTimers(); 101 | 102 | // Make sure the click event is being passed to consumer function 103 | expect(spy.mock.calls[0][0].target).toBeDefined(); 104 | expect(spy).toHaveBeenCalled(); 105 | }); 106 | }); 107 | }); 108 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "include": ["src", "types"], 3 | "compilerOptions": { 4 | "module": "esnext", 5 | "lib": ["dom", "esnext"], 6 | "importHelpers": true, 7 | "declaration": true, 8 | "sourceMap": true, 9 | "rootDir": "./src", 10 | "strict": true, 11 | "noImplicitReturns": true, 12 | "noFallthroughCasesInSwitch": true, 13 | "noUnusedLocals": true, 14 | "noUnusedParameters": true, 15 | "moduleResolution": "node", 16 | "jsx": "react", 17 | "esModuleInterop": true, 18 | "skipLibCheck": true, 19 | "forceConsistentCasingInFileNames": true, 20 | "noEmit": true, 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /tsdx.config.js: -------------------------------------------------------------------------------- 1 | const postCss = require('rollup-plugin-postcss'); 2 | 3 | module.exports = { 4 | rollup(config, options) { 5 | config.plugins.push( 6 | postCss({ 7 | extensions: ['.sass'], 8 | extract: !!options.writeMeta ? 'styles.css' : false, 9 | minimize: true, 10 | }), 11 | ); 12 | return config; 13 | }, 14 | }; 15 | --------------------------------------------------------------------------------