solid-ts-hooks

Solid-ts-hooks

Solidjs hook library, ready to use, written in Typescript.

npm i solid-ts-hooks

yarn add solid-ts-hooks

pnpm add solid-ts-hooks

_{Created by Rnwonder. inspired by usehooks-ts}

Hook List

• createClickOutside
• createLocalStorage
• createDarkMode
• createIntersectingObserver
• createMap
• createMediaQuery
• createWindowScroll
• createWindowSize

Usage

createClickOutside

import { createClickOutside} from "solid-ts-hooks";

const setRef = createClickOutside(() => {  
  console.log("click outside");  
});

return (
  <div ref={setRef}>Click outside me</div>
)

createLocalStorage

import { createLocalStorage } from "solid-ts-hooks";

const  [data, setData]  =  useLocalStorage('some-data',  {})

setData({ name: "Paul" })

return (
  <div>Your name is {data()?.name}</div>
)

createDarkMode

import { createDarkMode} from "solid-ts-hooks";

const { isDarkMode, enable, toggle, disable } = createDarkMode(true);

return (
  <div>Your mode is {isDarkMode() ? "Dark" : "Light"}</div>
)

createIntersectingObserver

import { createIntersectingObserver} from "solid-ts-hooks";

const { setRef, isVisible } = createIntersectingObserver({});

return (
  <div ref={setRef}>I am {isVisible() ? "visible" : "invisible"}</div>
)

createMap

import { createMap} from "solid-ts-hooks";

const  [map, actions]  =  createMap<string,  string>(initialValues)
    const  set  =  ()  => actions.set(String(Date.now()),  '📦')
	const  setAll  =  ()  => actions.setAll(otherValues)
	const  reset  =  ()  => actions.reset()
	const  remove  =  ()  => actions.remove('hello')

return (
  <div ref={setRef}>
	<button  onClick={set}>Add</button>
	<button  onClick={reset}>Reset</button>
	<button  onClick={setAll}>Set new data</button>
	<button  onClick={remove}  disabled={!map.get('hello')}>
		{'Remove "hello"'}
	</button>
</div>
)

createMediaQuery

import { createMediaQuery } from "solid-ts-hooks";

const matches =  createMediaQuery ('(min-width: 768px)')

return (
  <div>{`The view port is ${matches ?  'at least'  :  'less than'} 768 pixels wide`}</div>
)

createWindowScroll

import { createWindowScroll} from "solid-ts-hooks";

createWindowScroll(() => {
 console.log("scroll")
})

createWindowSize

import { createWindowSize} from "solid-ts-hooks";

const { width, height} =  createWindowSize()

console.log(width(), height())