elands-react-helpers
is a library of helper components for React Native applications. The library aims to provide a set of reusable and customizable components that can be used across different React Native projects.
To install elands-react-helpers
, run the following command in your terminal:
npm install elands-react-helpers
The CircularProgress
component is a customizable circular progress bar. It uses SVG to draw two circles: one for the background and one for the progress indicator.
Here is a basic example of how to use the CircularProgress
component:
import { CircularProgress } from 'elands-react-helpers';
<CircularProgress
progress={0.7}
circleColor="blue"
size={24}
strokeWidth={6}
/>
In this example, the CircularProgress
component is used to track how many pages a user has turned:
import { CircularProgress } from 'elands-react-helpers';
import { useState } from 'react';
const [progress, setProgress] = useState(0);
const handlePageSelected = (index: number): void => {
if (!spotlightItems.length) return;
setProgress((index + 1) / spotlightItems.length);
};
<CircularProgress size={24} progress={progress} strokeWidth={6} style={styles.circularProgress} />
The CircularProgress
component accepts the following props:
-
progress
: A number between 0 and 1 representing the progress. For example,0.5
represents 50% progress. This prop is required. -
circleColor
: A string representing the color of the progress circle. This prop is required. -
size
: A number representing the size of the progress circle in pixels. The default value is24
. -
strokeWidth
: A number representing the width of the progress circle stroke in pixels. The default value is6
. -
style
: A style object or array that will be passed to the outermostView
component. This can be used to apply additional styles or layout properties to the progress circle.
The AnimateComponentCollapsing
component is used to animate the collapsing of a component. It uses the Animated
API from react-native
to create a smooth transition effect.
Here is a basic example of how to use the AnimateComponentCollapsing
component:
import { AnimateComponentCollapsing } from 'elands-react-helpers';
<AnimateComponentCollapsing
isComponentCollapsed={isCollapsed}
expandComponentToHeight={200}
animationDurationInMs={500}
>
<YourComponent />
</AnimateComponentCollapsing>
In this example, YourComponent
will animate the collapsing and expanding based on the isCollapsed
state.
The AnimateComponentCollapsing
component accepts the following props:
-
isComponentCollapsed
: A boolean indicating whether the component is collapsed or not. This prop is required. -
expandComponentToHeight
: The height to which the component should expand when it is not collapsed. This prop is required. -
children
: The children components to be rendered inside this component. This prop is required. -
animationDurationInMs
: The duration of the animation in milliseconds. Defaults to 300ms.
Please replace "YourComponent" with the actual component you want to animate and adjust the usage example as necessary.
The useCallbackOnTimeout
hook is a custom React hook that allows you to execute a callback function after a specified timeout.
Here is a basic example of how to use the useCallbackOnTimeout
hook:
import { useCallbackOnTimeout } from 'elands-react-helpers';
useCallbackOnTimeout({
timeoutInMilliseconds: 2000,
callback: () => {
console.log('This will be logged after 2 seconds');
},
});
In this example, the console.log
statement will be executed after 2 seconds.
The useCallbackOnTimeout
hook accepts an object with the following properties:
-
timeoutInMilliseconds
: A number representing the delay before the callback function is executed, in milliseconds. This property is required. -
callback
: A function that will be executed after the specified timeout. This property is optional. If not provided, the hook will simply set a timeout and do nothing when it expires.
The useCallbackOnTimeout
hook automatically clears the timeout when the component unmounts or when the callback
or timeoutInMilliseconds
values change. This prevents potential memory leaks and ensures that the callback is not called after the component has unmounted or when the callback
or timeoutInMilliseconds
values have changed.
Contributions are welcome! Please open an issue or submit a pull request on GitHub.
This project is licensed under the terms of the MIT license.