react-tiny-fab
Advanced tools
Comparing version 3.5.0 to 4.0.0
@@ -1,27 +0,24 @@ | ||
| // Type definitions for react-tiny-fab 2.0 | ||
| // Project: https://github.com/dericgw/react-tiny-fab, https://dericgw.github.io/react-tiny-fab/ | ||
| // Definitions by: Ji-Hoon Lee <https://github.com/NoMoreViolence> | ||
| // TypeScript Version: 3.4.5 | ||
| import { ReactElement, DOMAttributes, CSSProperties, HTMLAttributes } from 'react'; | ||
| interface ActionProps { | ||
| text?: string; | ||
| children?: ReactElement; | ||
| import React from 'react'; | ||
| import './styles.scss'; | ||
| interface ABProps extends React.HTMLAttributes<HTMLButtonElement> { | ||
| text?: string; | ||
| onClick?: (e: React.FormEvent) => void; | ||
| 'data-testid'?: string; | ||
| } | ||
| declare const AB: React.FC<ABProps>; | ||
| interface MBProps extends Omit<React.HTMLAttributes<HTMLButtonElement>, 'tabIndex'> { | ||
| tabIndex?: number; | ||
| } | ||
| export declare const MB: React.FC<MBProps>; | ||
| interface FabProps { | ||
| mainButtonStyles?: CSSProperties; | ||
| position?: { bottom?: number; top?: number; right?: number; left?: number }; | ||
| icon: ReactElement; | ||
| event?: 'hover' | 'click'; | ||
| children?: ReactElement[] | ReactElement; | ||
| alwaysShowTitle?: boolean; | ||
| text?: string; | ||
| onClick?: (e: any) => any; | ||
| event?: 'hover' | 'click'; | ||
| style?: React.CSSProperties; | ||
| alwaysShowTitle?: boolean; | ||
| icon?: React.ReactNode; | ||
| mainButtonStyles?: React.CSSProperties; | ||
| onClick?: (e: React.FormEvent) => void; | ||
| text?: string; | ||
| children?: React.ReactNode; | ||
| } | ||
| type Action = (props: ActionProps & DOMAttributes<HTMLElement> & HTMLAttributes<HTMLElement>) => ReactElement; | ||
| type Fab = (props: FabProps) => ReactElement; | ||
| declare const Action: Action; | ||
| declare const Fab: Fab; | ||
| declare const Fab: React.FC<FabProps>; | ||
| export { Fab, AB as Action }; |
130
package.json
| { | ||
| "name": "react-tiny-fab", | ||
| "description": "A tiny Floating Action Button for React.", | ||
| "version": "3.5.0", | ||
| "version": "4.0.0", | ||
| "license": "MIT", | ||
| "author": "Deric Cain <deric.cain@gmail.com> (https://twitter.com/dericcain)", | ||
| "author": "Deric Cain <deric.cain@gmail.com>", | ||
| "repository": { | ||
@@ -15,5 +15,2 @@ "type": "git", | ||
| "homepage": "https://github.com/dericgw/react-tiny-fab", | ||
| "files": [ | ||
| "dist" | ||
| ], | ||
| "keywords": [ | ||
@@ -28,82 +25,69 @@ "react", | ||
| ], | ||
| "main": "dist/fab.cjs.js", | ||
| "module": "dist/fab.esm.js", | ||
| "types": "dist/index.d.ts", | ||
| "main": "dist/index.js", | ||
| "typings": "dist/index.d.ts", | ||
| "files": [ | ||
| "dist", | ||
| "src" | ||
| ], | ||
| "engines": { | ||
| "node": ">=10" | ||
| }, | ||
| "scripts": { | ||
| "build": "NODE_ENV=production rollup -c", | ||
| "build:release": "npm run test:release && npm run build", | ||
| "start": "tsdx watch", | ||
| "build": "tsdx build", | ||
| "test": "tsdx test --passWithNoTests", | ||
| "lint": "tsdx lint", | ||
| "prepare": "tsdx build", | ||
| "size": "size-limit", | ||
| "analyze": "size-limit --why", | ||
| "docs": "docz dev", | ||
| "docs:build": "docz build", | ||
| "lint": "eslint src/*.js* --fix", | ||
| "start": "run-p example:build example:serve", | ||
| "example:serve": "serve example", | ||
| "example:build": "WATCH=1 rollup -cw", | ||
| "size": "size-limit", | ||
| "test": "jest", | ||
| "test:release": "npm t && npm run size", | ||
| "preversion": "npm run build:release", | ||
| "version": "npm run docs:build && git add docs", | ||
| "release": "np --no-yarn" | ||
| "docs:build": "docz build" | ||
| }, | ||
| "jest": { | ||
| "moduleNameMapper": { | ||
| "\\.scss$": "<rootDir>/src/__mocks__/styles.js" | ||
| "peerDependencies": { | ||
| "react": ">=16.8" | ||
| }, | ||
| "husky": { | ||
| "hooks": { | ||
| "pre-commit": "tsdx lint --fix && git add ." | ||
| } | ||
| }, | ||
| "prettier": { | ||
| "printWidth": 100, | ||
| "semi": true, | ||
| "singleQuote": true, | ||
| "trailingComma": "all" | ||
| }, | ||
| "module": "dist/react-tiny-fab.esm.js", | ||
| "size-limit": [ | ||
| { | ||
| "path": "dist/fab.esm.js", | ||
| "limit": "1.5kb" | ||
| "path": "dist/react-tiny-fab.cjs.production.min.js", | ||
| "limit": "2 KB" | ||
| }, | ||
| { | ||
| "path": "dist/react-tiny-fab.esm.js", | ||
| "limit": "2 KB" | ||
| } | ||
| ], | ||
| "peerDependencies": { | ||
| "react": ">= 16.8", | ||
| "react-dom": ">= 16.8" | ||
| }, | ||
| "devDependencies": { | ||
| "@babel/core": "^7.1.0", | ||
| "@babel/plugin-proposal-class-properties": "^7.1.0", | ||
| "@babel/preset-env": "^7.1.0", | ||
| "@babel/preset-react": "^7.0.0", | ||
| "@types/jest": "^23.3.2", | ||
| "babel-core": "^7.0.0-bridge.0", | ||
| "babel-eslint": "^10.0.0", | ||
| "babel-jest": "^24.8.0", | ||
| "babel-plugin-jsx-remove-data-test-id": "^1.1.4", | ||
| "babel-plugin-remove-test-ids": "^1.1.0", | ||
| "babel-preset-minify": "^0.5.0", | ||
| "docz": "^1.2.0", | ||
| "docz-plugin-css": "^0.11.0", | ||
| "@size-limit/preset-small-lib": "^4.6.0", | ||
| "@testing-library/jest-dom": "^5.11.4", | ||
| "@testing-library/react": "^11.0.4", | ||
| "@types/react": "^16.9.49", | ||
| "@types/react-dom": "^16.9.8", | ||
| "docz": "^2.3.1", | ||
| "docz-theme-default": "^1.2.0", | ||
| "eslint": "^5.16.0", | ||
| "eslint-config-airbnb": "^17.1.0", | ||
| "eslint-config-prettier": "^3.1.0", | ||
| "eslint-plugin-import": "^2.14.0", | ||
| "eslint-plugin-jest": "^21.22.1", | ||
| "eslint-plugin-jsx-a11y": "^6.1.1", | ||
| "eslint-plugin-prettier": "^2.6.2", | ||
| "eslint-plugin-react": "^7.11.1", | ||
| "jest": "^24.7.1", | ||
| "jest-dom": "^3.5.0", | ||
| "sass": "^1.23.7", | ||
| "np": "^5.0.3", | ||
| "npm-run-all": "^4.1.5", | ||
| "prettier": "^1.14.3", | ||
| "react": "^16.8.2", | ||
| "react-dom": "^16.8.2", | ||
| "react-icons": "^3.1.0", | ||
| "react-testing-library": "^5.1.0", | ||
| "regenerator-runtime": "^0.12.1", | ||
| "rollup": "^1.15.6", | ||
| "rollup-plugin-babel": "^4.3.2", | ||
| "rollup-plugin-bundle-size": "^1.0.3", | ||
| "rollup-plugin-cleanup": "^3.1.1", | ||
| "rollup-plugin-copy-glob": "^0.3.1", | ||
| "rollup-plugin-commonjs": "^10.0.0", | ||
| "rollup-plugin-node-resolve": "^5.0.3", | ||
| "rollup-plugin-postcss": "^2.0.3", | ||
| "serve": "^11.0.1", | ||
| "size-limit": "^1.3.7", | ||
| "webpack": "^4.28.4" | ||
| "gatsby-plugin-sass": "^2.3.14", | ||
| "gatsby-theme-docz": "^2.3.1", | ||
| "husky": "^4.3.0", | ||
| "identity-obj-proxy": "^3.0.0", | ||
| "node-sass": "^4.14.1", | ||
| "react": "16.13.1", | ||
| "react-dom": "16.13.1", | ||
| "rollup-plugin-postcss": "^3.1.8", | ||
| "rollup-plugin-scss": "^2.6.1", | ||
| "size-limit": "^4.6.0", | ||
| "tsdx": "^0.14.0", | ||
| "tslib": "^2.0.1", | ||
| "typescript": "^4.0.3" | ||
| } | ||
| } |
103
README.md
@@ -12,104 +12,5 @@  | ||
| ## Install | ||
| ## Docs | ||
| Please visit here for docs: [https://dericgw.github.io/react-tiny-fab](https://dericgw.github.io/react-tiny-fab) | ||
| ``` | ||
| npm install react-tiny-fab | ||
| yarn add react-tiny-fab | ||
| ``` | ||
| ## Usage | ||
| There are two components available for import - `Fab` and `Action`. You import them like this: | ||
| ```js | ||
| import { Fab, Action } from 'react-tiny-fab'; | ||
| import 'react-tiny-fab/dist/styles.css'; | ||
| ``` | ||
| Here is an example of how you would use the components: | ||
| ```js | ||
| // The Fab is the main button. Pass any component to the icon prop and choose | ||
| // either click or hover for the event (default is hover) | ||
| <Fab | ||
| mainButtonStyles={mainButtonStyles} | ||
| actionButtonStyles={actionButtonStyles} | ||
| position={position} | ||
| icon={<MdAdd />} | ||
| event={event} | ||
| > | ||
| // The Action components are the "buttons" that appear when the Fab is open. You can use the out-of-the-box Action | ||
| // component or you can use a custom component of any type and style it any way that you'd like. The "text" prop | ||
| // is the popup label that appears when the Action component is hovered. | ||
| <Action | ||
| text="Email" | ||
| onClick={handleEmailOnClick} | ||
| /> | ||
| <Action | ||
| text="Help" | ||
| onClick={handleHelpOnClick} | ||
| > | ||
| <i className="fa fa-help" /> | ||
| </Action> | ||
| // Using a custom component for this one. See another example in "example/src/index.js" | ||
| <SomeCustomComponent | ||
| text="Foobar!" | ||
| onClick={handleTheFooBarOnClick} | ||
| > | ||
| <i className="fa fa-foo-bar-fa-foo" /> | ||
| </SomeCustomComponent> | ||
| </Fab> | ||
| ``` | ||
| ## Components | ||
| ### `<Fab />` | ||
| This is the main component that controls the Floating Action Button. | ||
| #### Props | ||
| | Prop | Type | Default | Required | Description | | ||
| |----------------------|----------------------------|-------------------------- |----------|--------------------------------------------------------------------------------------------------------------------------------------------| | ||
| | `mainButtonStyles` | React.CSSProperties object | {} | false | This object is passed to the main button's `style` prop so use React styles to style the button. | | ||
| | `position` | object | `{ bottom: 24, right: 24 }` | false | Where do you want your FAB to be located? Use `top`, `left`, `bottom`, `right` properties to declare where you want the FAB to be positioned. | | ||
| | `icon` | React Element/Component | | true | This element/component will be used as the icon for the main button. This can be text, or a Font Awesome icon, or any other component. | | ||
| | `event` | string | 'hover' | false | What type of event do you want to make the FAB menu active? This can be either `click` or `hover`. | | ||
| | `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. | | ||
| | `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` | | ||
| | `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 | | ||
| > Based on the `position` prop, the FAB will figure out the direction of the `<Action />` `text` and also which way to | ||
| > expand when hovered/clicked (up or down). | ||
| ### `<Action />` | ||
| This component represents the smaller buttons that appear when the main button is hovered/clicked. Now, you do not have | ||
| to use this component. You can use your own custom component(s) and create something totally different than a Floating | ||
| Action Button. For instance, you could create your own "Support Button" that when clicked, will display a chat box or | ||
| some type of form that submits a contact request. | ||
| #### Props | ||
| | Prop | Type | Default | Required | Description | | ||
| |------------|-------------------------|---------|----------|------------------------------------------------------------------------------| | ||
| | `text` | string | "" | false | This is the text that will be displayed when one of the actions is hovered. | | ||
| | `children` | React Element/Component | | false | This will be the icon/text for the action. | | ||
| | `...props` | Anything | | false | Anything you can add to a React component, you can add here, e.g. (`onClick`, `style`, etc.) | | ||
| ## Demo | ||
| Check out the [index.js](./example/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. | ||
| ## Contributing | ||
| 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. | ||
| ### Running the dev environment | ||
| 1. Clone the repo - `git clone https://github.com/dericgw/react-tiny-fab.git` && `cd react-tiny-fab` | ||
| 2. Install the dependencies - `npm i` | ||
| 3. Run the example - `npm start` _Visit http://localhost:5000_ | ||
| Once you get that going, you should be able to make changes and the page should refresh automatically when those changes | ||
| are saved. | ||
| ### Testing | ||
| This package is only one JS file and it is tested pretty good. Make sure that none of the tests are breaking if changes | ||
| are made. Also, if you add new functionality and it *warrants* testing, please add tests. If you need help with this, I | ||
| will gladly help. | ||
| ## Issues | ||
@@ -116,0 +17,0 @@ If you find an issue, head over to the [Issues](https://github.com/dericgw/react-tiny-fab/issues) section and let me |
Sorry, the diff of this file is not supported yet
New alerts
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Environment variable access
Supply chain riskPackage accesses environment variables, which may be a sign of credential stuffing or data theft.
Found 1 instance in 1 package
Long strings
Supply chain riskContains long string literals, which may be a sign of obfuscated or packed code.
Found 1 instance in 1 package
Minified code
QualityThis package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by219.19%
68893
- Dependency count
- decreased by-50%
1
- Dev dependency count
- decreased by-54.55%
20
- Number of package files
- increased by114.29%
15
- Lines of code
- increased by100.81%
498
Worsened metrics
- Number of low quality alerts
- increased byInfinity%
1
- Number of lines in readme file
- decreased by-82.5%
21
- Number of low supply chain risk alerts
- increased byInfinity%
3
- Number of medium supply chain risk alerts
- increased byInfinity%
1
No dependency changes