novajslabs / nova.js Goto Github PK
View Code? Open in Web Editor NEWA collection of dependency-free React hooks
Home Page: https://novajs.co/
License: MIT License
A collection of dependency-free React hooks
Home Page: https://novajs.co/
License: MIT License
Use screen.orientation.type
Currently, Nova.js lacks a hook to detect whether the device is touch-enabled or not. This could be useful for adapting the user interface or application behavior based on the device type.
I propose adding a new hook called useIsTouchDevice to detect if the device is touch-enabled. This hook will utilize standard methods to determine this condition.
React Hook to detect the current network connection status through the online and offline events.
I propose creating a hook that allows downloading a file. This hook could provide the error (if there is one), a download indicator and the function that downloads the file, which could receive the url of the file and the name that the file will have once downloaded.
import { useDownloadFile } from './hooks/useDownloadFile'
const App = () => {
const { error, isDownloading, downloadFile } = useDownloadFile()
const onClickButton = () => {
downloadFile('react.svg', 'https://www.svgrepo.com/show/452092/react.svg')
}
return (
<div>
<button disabled={isDownloading} onClick={onClickButton}>
{isDownloading ? 'Downloading...' : 'Download file'}
</button>
{error && <p>Could not download file</p>}
</div>
)
}
export default App
If this suggestion is accepted, I would like to implement it. Additionally, I'm open to suggestions and feedback to improve the proposal.
From
setIsTouchDevice(
'ontouchstart' in window ||
navigator.maxTouchPoints > 0 ||
navigator.msMaxTouchPoints > 0
);
to
setIsTouchDevice(
'ontouchstart' in window ||
navigator.maxTouchPoints > 0 ||
navigator.maxTouchPoints > 0
);
It would be interesting to have a hook to obtain the screen dimensions
Detect changes in the current color preference through Match Media and the classes defined in the root.
I propose to add a new hook called useNavigatorShare, to share content (text, url, files) using the navigator.share api. With error validation and in a simpler way.
interface IShareData {
title: string
text: string
url?: string
files?: File[]
}
const errorMessages: Record<string, string> = {
NotAllowedError: 'Permiso para compartir denegado.',
AbortError: 'La acción de compartir fue abortada.',
NotSupportedError: 'Tu navegador no soporta la función de compartir.',
TypeError: 'Error al compartir: tipo de dato incorrecto.'
}
function checkPermission (files?: File[]) {
if (!navigator.canShare) {
throw new Error('Tu navegador no soporta la función de compartir.')
}
if (!navigator.canShare({ files } ?? { files: [new File([], '')] })) {
throw new Error(`Tu navegador no permite compartir ${files ? 'este tipo de ' : ''} archivos.`)
}
}
function surroundTryCatch (fn: (data: IShareData) => void | Promise<void>) {
return async (data: IShareData) => {
try {
await fn(data)
} catch (error: unknown) {
if ((error as Error).name in errorMessages) {
const message = `Error al compartir: ${errorMessages[(error as Error).name]}`
console.error(message)
} else {
throw error
}
}
}
}
export const useNavigatorShare = () => {
async function shareInNavigator (data: IShareData) {
if (data.files) checkPermission(data.files)
await navigator.share({
title: data.title,
text: data.text ?? '',
url: data.url ?? '',
files: data.files ?? []
})
}
return {
shareInNavigator: surroundTryCatch(shareInNavigator),
}
}
package.json
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.