-
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
patch(function): version update (v1.0.4)
- Loading branch information
1 parent
ac4a338
commit 8f842ba
Showing
4 changed files
with
155 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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" | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
export { scrollView, toTitleCase, formatDate } from "./functions"; |