@slimr/react

🪶 @slimr/react

A collection of useful 1st and third party react components, hooks, and util. Includes several other @slimr libs for convenience

Context

@slimr is a set of slim React (hence '@slimr') libs. Check them all out on github!

Setup

• Install using normal methods (npm i, yarn i, ...etc)
• There is a known conflict with vitest, which you can resolve by adding the following to vite.config.js

export default defineConfig({
  test: {
    deps: {
      inline: ['@slimr/hooks'],
    },
  },
})

API

Bundled from other libs

• @slimr/forms - An enhanced HTML form with auto-disabling, auto-reset, error handling, more JS events, and context to its children.
• @slimr/markdown - A simple component and slim markdown-to-html parser
• @slimr/router - A novel React-web router that supports stack routing
• @slimr/styled - css-in-js features inspired by the popular styled-components and Chakra-UI libs
• @slimr/swr - A React hook for fetching data that supports stale-while-refresh eager rendering
• react-use - an excellent collection of hooks

mergeRefs

Merge React refs so that multiple refs can be used on a single element. Is used to merge refs from a forwardRef and a local ref from useRef.

Credits: react-merge-refs

const MyComponent = forwardRef((props, ref1) => {
 const ref2 = useRef(null)
 return (<div ref={mergeRefs([ref1, ref2])} />)
})

Observable

Provides a variable with observable capabilities, like pub/sub and React hook integration.

  import { Observable } from '@slimr/react';
  const myObservable = new Observable('myObservable', 0);
  myObservable.subscribe((newValue) => { console.log('New value:', newValue); });
  setTimeout(() => { myObservable.val = 42; }, 1000);
  setTimeout(() => { myObservable.set(50); }, 2000);
  setTimeout(() => { myObservable.set(last => last + 1); }, 3000);

  function MyComponent() {
    myObservable.use();
    return <div>{myObservable.value}</div>;
  }

useDeepCompareMemo and useShallowCompareMemo

like react-use's useDeepEffects, but for memos

useSet2

Returns a set-like object that intercepts the setter function to trigger re-renders on change. Also adds a toggle and reset method. @slimr/hooks also exports a useSet from react-use, which is similar but has a different, less desirable (imho) pattern.

function MyComponent() {
  const optionalInitialValue = new Set()
  const [set1, set1Setters] = useSet(optionalInitialValue)
  const set2 = useSet2(optionalInitialValue)

  // Use set2 like you would a vanilla JS Set

useSWR

A hook that accepts a function callback, calls the function and returns a reactive callback state. Uses a cache and will return the cache value if available while waiting for the callback to complete, then update the return on complete. This is often called 'stale-while-refresh' and abbreviated as 'SWR', hence the name of the hook. Source is in @slimr/swr

import {useSWR} from `@slimr/swr`

function MyComponent({ page }: number) {
  const { result, loading, refresh} = useSWR(() => getPageData(page), [page], {throttle: Infinity})
  if (loading) return null
  return (
    <section>
      <h1>{result.title}</h1>
      <p>{result.description}</h1>
      <button onClick={refresh}>Refresh</button>
    </section>
  )
}