Gathering detailed insights and metrics for @bluframe/grapple
Installations
npm install @bluframe/grappleDeveloper Guide
BETA
Typescript
No
Module System
CommonJS, ESM
Min. Node Version
16
Releases
Unable to fetch releases
Contributors
1
Love this project? Help keep it running — sponsor us today! 🚀
Download Statistics
Total Downloads
6,031
Last Day
23
Last Week
43
Last Month
152
Last Year
2,604
Bundle Size
7.66 kB
Minified
2.97 kB
Minified + Gzipped
Maintainers
1
Package Meta Information
Latest Version
1.0.1
Package Id
@bluframe/grapple@1.0.1
Unpacked Size
16.15 kB
Size
4.52 kB
File Count
14
Publised On
21 Dec 2023
Total Downloads
Cumulative downloads
Total Downloads
6,031
Last day
155.6%
23
Compared to previous day
Last week
59.3%
43
Compared to previous week
Last month
20.6%
152
Compared to previous month
Last year
55.3%
2,604
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dev Dependencies
30
@babel/core@babel/eslint-parser@babel/plugin-syntax-flow@babel/plugin-transform-react-jsx@babel/plugin-transform-runtime@babel/preset-env@babel/preset-flow@babel/preset-react@babel/runtime@rollup/plugin-babel@testing-library/jest-dom@testing-library/reactbabel-jestbabel-plugin-module-resolvereslinteslint-config-prettiereslint-plugin-flowtypeeslint-plugin-importeslint-plugin-jesteslint-plugin-prettiereslint-plugin-reacteslint-plugin-react-hooksflow-binjestjest-resolvejest-watch-typeaheadprettierresolverolluprollup-plugin-includepaths
Versions
BluFrame React Hooks
BluFrame React Hooks is a collection of useful and reusable hooks to enhance your React development experience.
How to Install
If you are using yarn:
1yarn add @bluframe/grapple
And if you are using npm:
1npm i @bluframe/grapple
How to import
You can import the hooks individually:
1import usePrevious from "@bluframe/grapple/usePrevious";
Or import multiple hooks at once:
1import { usePrevious, useOnScreen } from "@bluframe/grapple";
Hooks
usePrevious
Stores the previous value of a constant.
Usage
1import usePrevious from "@bluframe/grapple/usePrevious"; 2 3function App() { 4 const [count, setCount] = useState(0); 5 const previousCount = usePrevious(count); 6 7 return ( 8 <div> 9 <p>Current count: {count}</p> 10 <p>Previous count: {previousCount}</p> 11 <button onClick={() => setCount(count + 1)}>Increment</button> 12 </div> 13 ); 14}
useOnScreen
Uses IntersectionObserver and notifies when an element appears on screen.
Usage
1import useOnScreen from "@bluframe/grapple/useOnScreen"; 2 3function App() { 4 const [isVisible, ref] = useOnScreen("0px"); 5 6 return ( 7 <div ref={ref}> 8 {isVisible ? "Element is on screen" : "Element is not on screen"} 9 </div> 10 ); 11}
useToggle
Creates a boolean value and an easy toggle function.
Usage
1import useToggle from "@bluframe/grapple/useToggle"; 2 3function App() { 4 const [isToggled, toggle] = useToggle(false); 5 6 return ( 7 <div> 8 <p>{isToggled ? "Toggled" : "Not Toggled"}</p> 9 <button onClick={toggle}>Toggle</button> 10 </div> 11 ); 12}
useTrimText
Trims text to a maximum number of characters and adds ... when content exceeds the limit.
Usage
1import useTrimText from "@bluframe/grapple/useTrimText"; 2 3function App() { 4 const text = "This is a long text that needs to be trimmed."; 5 const trimmedText = useTrimText(text, 10); 6 7 return <div>{trimmedText}</div>; 8}
prepareComponent
Receives Props, transforms them into ComponentProps, and returns a Component with ComponentProps. The hook also provides the ability to control when the component should render and update.
Usage
1import prepareComponent from "@bluframe/grapple/prepareComponent"; 2 3function ExampleComponent({ text }) { 4 return <div>{text}</div>; 5} 6 7const usePrepareComponent = (props) => { 8 return { 9 text: props.text.toUpperCase(), 10 }; 11}; 12 13const options = { 14 onlyRenderIf: (props) => props.text.length > 3, 15 onlyUpdate: ["text"], 16}; 17 18const PreparedExampleComponent = prepareComponent(usePrepareComponent, options)( 19 ExampleComponent 20); 21 22function App() { 23 const [text, setText] = useState("Hello"); 24 25 return ( 26 <div> 27 <input value={text} onChange={(e) => setText(e.target.value)} /> 28 <PreparedExampleComponent text={text} /> 29 </div> 30 ); 31}
In this example, prepareComponent is used to create a new PreparedExampleComponent. The usePrepareComponent function transforms the text prop to uppercase. The options object controls the rendering and updating behavior:
onlyRenderIf: Only renders the component if thetextprop has a length greater than 3.onlyUpdate: Only updates the component if thetextprop changes.
The App component demonstrates how the PreparedExampleComponent is used in conjunction with an input field.
Contributing
We welcome contributions to improve BluFrame React Hooks! If you'd like to contribute, please follow these steps:
- Fork the repository.
- Create a new branch for your feature or bugfix.
- Make your changes and commit them to your branch.
- Submit a pull request with a detailed description of your changes.
Please ensure that your code follows our coding style and passes all tests.
License
BluFrame React Hooks is MIT licensed.
No vulnerabilities found.
No security vulnerabilities found.