Skip to content

Commit

Permalink
patch(function): version update (v1.0.4)
Browse files Browse the repository at this point in the history
  • Loading branch information
100percentibrahim committed Apr 12, 2024
1 parent ac4a338 commit 8f842ba
Show file tree
Hide file tree
Showing 4 changed files with 155 additions and 0 deletions.
76 changes: 76 additions & 0 deletions packages/react/function/README.md
Original file line number Diff line number Diff line change
@@ -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 (
<div id="homepage">
<nav>
<button onClick={() => scrollView(-70, "about-us")}>About Us</button>
</nav>
<div id="about-us">{/* About Content */}</div>
</div>
);
};
```

### 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.
46 changes: 46 additions & 0 deletions packages/react/function/package.json
Original file line number Diff line number Diff line change
@@ -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"
}
}
32 changes: 32 additions & 0 deletions packages/react/function/src/functions.ts
Original file line number Diff line number Diff line change
@@ -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);
}
1 change: 1 addition & 0 deletions packages/react/function/src/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export { scrollView, toTitleCase, formatDate } from "./functions";

0 comments on commit 8f842ba

Please sign in to comment.