diff --git a/packages/react/function/README.md b/packages/react/function/README.md
new file mode 100644
index 0000000..4f16ada
--- /dev/null
+++ b/packages/react/function/README.md
@@ -0,0 +1,76 @@
+# @ibrahimstudio/function
+
+This package provides useful JavaScript functions for handling events and string manipulations.
+
+## Installation
+
+You can install this package via npm:
+
+```sh
+npm i @ibrahimstudio/function
+# or
+yarn add @ibrahimstudio/function
+```
+
+## Usage
+
+### 1. `scrollView`
+
+The `scrollView` function allows you to smoothly scroll to a specific element on the page.
+
+```javascript
+import { scrollView } from "@ibrahimstudio/function";
+
+// Assuming the offset value based on the height of the Navbar
+// The target element to scroll to is the About section with the "about-us" id
+
+const Homepage = () => {
+ return (
+
+
+
{/* About Content */}
+
+ );
+};
+```
+
+### scrollView Props
+
+| Attribute | Type | Description | Default |
+| --------- | ------------------- | ---------------------------------------------------- | ------- |
+| `offset` | _number_ (required) | The offset from the top of the element to scroll to. | - |
+| `id` | _string_ (required) | The ID of the element to scroll to. | - |
+
+> Note: If the `offset` has no value, fill it with `0`
+
+---
+
+### 2. `toTitleCase`
+
+The `toTitleCase` function converts a string to title case.
+
+```javascript
+import { toTitleCase } from "@ibrahimstudio/function";
+
+// Example usage:
+const title = toTitleCase("hello world");
+console.log(title); // Output: "Hello World"
+```
+
+### toTitleCase Props
+
+| Attribute | Type | Description | Default |
+| --------- | ------------------- | ------------------------------------ | ------- |
+| `str` | _string_ (required) | The string to convert to title Case. | - |
+
+---
+
+## Contributing
+
+Contributions are welcome! If you have any improvements, bug fixes, or features, feel free to open an issue or create a pull request on GitHub.
+
+## License
+
+This project is licensed under the MIT License - see the [LICENSE](https://github.com/space-ibrahimstudio/ibrahimstudio/blob/master/LICENSE) file for details.
diff --git a/packages/react/function/package.json b/packages/react/function/package.json
new file mode 100644
index 0000000..235353b
--- /dev/null
+++ b/packages/react/function/package.json
@@ -0,0 +1,46 @@
+{
+ "name": "@ibrahimstudio/function",
+ "version": "1.0.4",
+ "description": "This function package provides useful functions for handling common tasks in React applications.",
+ "main": "dist/index.js",
+ "module": "dist/index.es.js",
+ "types": "dist/index.d.ts",
+ "sideEffects": false,
+ "scripts": {
+ "build": "npm run clean && tsc",
+ "clean": "rimraf dist",
+ "prepublishOnly": "npm run build",
+ "test": "echo \"Error: no test specified\" && exit 1"
+ },
+ "keywords": [
+ "function",
+ "react",
+ "components"
+ ],
+ "files": [
+ "dist",
+ "README.md"
+ ],
+ "publishConfig": {
+ "access": "public"
+ },
+ "repository": {
+ "type": "git",
+ "url": "git+https://github.com/space-ibrahimstudio/ibrahimstudio.git",
+ "directory": "packages/react/function"
+ },
+ "bugs": {
+ "url": "https://github.com/space-ibrahimstudio/ibrahimstudio/issues"
+ },
+ "author": "Ibrahim Space Studio",
+ "license": "MIT",
+ "homepage": "https://space.ibrahimstudio.co",
+ "peerDependencies": {
+ "react": ">=18",
+ "react-dom": ">=18"
+ },
+ "devDependencies": {
+ "react": "^18.2.0",
+ "react-dom": "^18.2.0"
+ }
+}
diff --git a/packages/react/function/src/functions.ts b/packages/react/function/src/functions.ts
new file mode 100644
index 0000000..8ea929d
--- /dev/null
+++ b/packages/react/function/src/functions.ts
@@ -0,0 +1,32 @@
+export function scrollView(offset: number, id: string): void {
+ const element = document.querySelector(`[id="${id}"]`) as HTMLElement | null;
+ if (element) {
+ const yOffset: number = offset;
+ const y: number =
+ element.getBoundingClientRect().top + window.scrollY + yOffset;
+ window.scrollTo({ top: y, behavior: "smooth" });
+ } else {
+ console.error(`Element with id ${id} not found.`);
+ }
+}
+
+export function toTitleCase(str: string): string {
+ return str.replace(/\w\S*/g, function (txt: string): string {
+ return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
+ });
+}
+
+export function formatDate(
+ dateString: string,
+ locale: string = "en-US"
+): string {
+ const date = new Date(dateString);
+ const options: Intl.DateTimeFormatOptions = {
+ day: "numeric",
+ month: "long",
+ year: "numeric",
+ hour: "numeric",
+ minute: "numeric",
+ };
+ return date.toLocaleDateString(locale, options);
+}
diff --git a/packages/react/function/src/index.ts b/packages/react/function/src/index.ts
new file mode 100644
index 0000000..ff1070c
--- /dev/null
+++ b/packages/react/function/src/index.ts
@@ -0,0 +1 @@
+export { scrollView, toTitleCase, formatDate } from "./functions";