open-index/open-npm huggingface dataset:
npm package: @sjay/carbon
Description: A Nodejs(Express) server application built with typescript
Author: Damilola Seweje
Latest version: 0.1.1

# Phonyjs-lite

## Getting started

### Installaltion

```
$ npm install -g phonyjs-lite
```

```
$ yarn add -g phonyjs-lite
```

### Running the phonyjs-lite CLI

```
$ phonyjs-lite
$ ? Enter app name: my-app
```

### Initialize app

```
$ cd my-app
$ yarn install
$ yarn dev
```

## Enjoy!!! 🥳
npm package: @sjblurton/use-array
Description: useArray to work with arrays in useState and updating to the DOM.
Author: Simon Blurton
Latest version: 1.1.2

# useArray

useArray to work with arrays in useState and updating to the DOM.

To init it defaults to an empty array, or takes an array as an input, and returns a selection of helper functions.

### **install**

```bash
npm i @sjblurton/use-array

yarn add @sjblurton/use-array
```

### Import useArray

```bash
import useArray from "@sjblurton/use-array";
```

### **To call the hook...**

```bash
const { array, set, clear, filter, push, remove, update, reverse, sort } = useArray([1, 2, 3, 4, 5, 6, 7,])
```

### **set**

sets the array to a new value.

```bash
set([4,3,2,1])
```

### **clear**

clears the array to an empty array

```bash
clear()
```

### **filter**

array filter function. add the callback function to filter.

```bash
filter(n => n < 4)
```

### **push**

add a new element to the end of the array.

```bash
push('hello world')
```

### **remove**

remove the element at the given index.

```bash
remove(2)
```

### **update**

update the element in the array of the given index.

```bash
update(2, 'fo')
```

### **reverse**

reverses the array

```bash
reverse()
```

### **sort**

sorts the array. Takes a function or undefined

```bash
sort()
```

```bash
sort((a, b) => {
          if (a.name < b.name) {
            return -1;
          }
          if (a.name > b.name) {
            return 1;
          }
          return 0;
        })
```

### **Links**

GitHub: https://github.com/sjblurton/use-array
<br/>
NPM: https://www.npmjs.com/package/@sjblurton/use-array
npm package: @sjblurton/use-axios
Description: useAxios, for CREATE, UPDATE, DELETE, and useAxiosGet to read data form a rest API, stores it in the cache.
Author: Simon Blurton
Latest version: 0.1.0

# useAxios

useAxios, for CREATE, UPDATE, DELETE, and useAxiosGet to read data form a rest API, stores it in the cache.

All error handling, and a status for pending, error idle, and success with the REST API.

### **install**

```bash
npm i @sjblurton/use-axios

yarn add @sjblurton/use-axios
```

### Import useAxios

```bash
import { useAxiosGet, useAxios }from "@sjblurton/use-axios-get";
```

### **To call the hooks...**

```bash
const [status, response, error, setAPICall] = useAxios<RequestData, ServerResponseData>();
const [status, data, error, mutate] = useAxiosGet<Data>('url')

```

### **status**

returns a string of 'idle', 'pending', 'error', or 'success'

### **response**

returns an AxiosResponse or undefined if not responded.

### **error**

returns an AxiosError response or undefined if no error

### **data**

returns the response data or undefined

### **setAxiosReq**

takes one AxiosRequestConfig object with two values required, the url string and method as a string. plus all the optional ones, refer to the Axios docs here: https://axios-http.com/docs/req_config

```bash
setAxiosReq({
              method: 'DELETE',
              url: '/user/2',
          })
```

### **useAxiosGet**

```bash
function App() {
  const todos = useAxiosGet<MockData>(
    "https://jsonplaceholder.typicode.com/todos"
  );

  if (todos.status === "pending") return <div>loading...</div>;
  if (todos.status === "error") return <div>{todos?.error?.message}</div>;

  return (
    <div className="App">
      {todos?.data?.map((todo) => (
        <h2>{todo.title}</h2>
      ))}
      <button onClick={todos?.mutate}>Mutate</button>
    </div>
  );
}
```

### **Links**

GitHub: https://github.com/sjblurton/use-axios-get
<br/>
NPM: https://www.npmjs.com/package/@sjblurton/use-axios-get
npm package: @sjblurton/use-axios-get
Description: useAxiosGet gets data form a rest API, stores it in the cache, error handles, and passes a status for loading, error, and successful fetching.
Author: Simon Blurton
Latest version: 0.1.4

# useAxiosGet

useAxiosGet gets data form a rest API, stores it in the cache, error handles, and passes a status for loading, error, and successful fetching.

### **install**

```bash
npm i @sjblurton/use-axios-get

yarn add @sjblurton/use-axios-get
```

### Import useArray

```bash
import useAxiosGet from "@sjblurton/use-axios-get";
```

### **To call the hook...**

```bash
  const {status, data, error, mutate} = useAxiosGet<Data>(

```

### **Possible Use Sanarios**

```bash
function App() {
  const {status, data: todos, error, mutate} = useAxiosGet<MockData>(
    "https://jsonplaceholder.typicode.com/todos"
  );

  if (status === "idle") return <div>idling...</div>;
  if (status === "pending") return <div>loading...</div>;
  if (status === "error") return <div>{error?.message}</div>;

  return (
    <div className="App">
      {todos?.map((todo) => (
        <h2>{todo.title}</h2>
      ))}
      <button onClick={mutate}>Mutate</button>
    </div>
  );
}
```

### **Links**

GitHub: https://github.com/sjblurton/use-axios-get
<br/>
NPM: https://www.npmjs.com/package/@sjblurton/use-axios-get
npm package: @sjblurton/use-axios-post
Description: useAxiosPost a React custom hook fully tested that returns a tuple of status, a function to make a post request, and axios error response, and the success response.
Author: Simon Blurton
Latest version: 0.1.2

# useAxiosPost

useAxiosPost a React custom hook fully tested that returns a tuple of status, a function to make a post request, and axios error response, and the success response.

### **install**

```bash
npm i @sjblurton/use-axios-post

yarn add @sjblurton/use-axios-post
```

### Import useAxiosPost

```bash
import useAxiosPost from "@sjblurton/use-axios-post";
```

### **To call the hook...**

```bash
const [status, setPost, error, response] = useAxiosPost<RequestData, ServerResponseData>();
```

### **status**

returns a string of 'idle', 'pending', 'error', or 'success'

### **setPost**

takes one object with two values, the url and a string, and the JSON body of the post.

```bash
setPost({
            url: "https://reqreres.in/api/",
            post: {
              name: "morpheus",
              job: "leader",
            },
          })
```

### **error**

returns an AxiosError response or undefined if no error

### **response**

returns an AxiosResponse or undefined if not responded.

### **Links**

GitHub: https://github.com/sjblurton/use-axios-post
<br/>
NPM: https://www.npmjs.com/package/@sjblurton/use-axios-post
npm package: @sjblurton/use-debounce
Description: useDebounce to add a delay to a action after stopping interaction. I.E. Typing into a search field, and there's a delay from stopping typing of 1 second before the search is called.
Author: Simon Blurton
Latest version: 0.1.0

# useDebounce

useDebounce to add a delay to a action after stopping interaction. I.E. Typing into a search field, and there's a delay from stopping typing of 1 second before the search is called.

there's 3 arguments, the first is the function to delay, the second is the delay in milliseconds, and the third is the dependencies which will reset the timer.

### **import the hook...**

```bash
import useDebounce from "../hooks/use-debounce";
```

### **To call the hook...**

```bash
useDebounce(() => callAPI, 1000, [searchFieldInput])
```

### **Links**

GitHub: https://github.com/sjblurton/use-debounce
<br/>
NPM: https://www.npmjs.com/package/@sjblurton/use-debounce
npm package: @sjblurton/use-event-listener
Description: useEventListener is a custom react hook to add and remove event listeners from the dom. First input is the listener, the second is a callback function to run when the the listener is triggered, the third is optional
Author: Simon Blurton
Latest version: 0.1.0

# useEventListener

useEventListener is a custom react hook to add and remove event listeners from the dom. First input is the listener, the second is a callback function to run when the the listener is triggered, the third is optional

### **To install**

```bash
npm i "@sjblurton/use-event-listener"

yarn add "@sjblurton/use-event-listener"
```

### **To import the hook**

```bash
import useEventListener from "@sjblurton/use-event-listener";
```

### **To call the hook...**

```bash
  useEventListener("keydown", (e: KeyboardEvent) => {
    function(e.key);
  }, HTMLElement);
```

### **Links**

GitHub: https://github.com/sjblurton/use-event-listener
<br/>
NPM: https://www.npmjs.com/package/@sjblurton/use-event-listener
npm package: @sjblurton/use-media-query
Description: useMediaQuery is will return a boolean true of false so you can implement any javascript you need based on the media queries you want.
Author: Simon Blurton
Latest version: 0.1.0

# useMediaQuery

useMediaQuery is will return a boolean true of false so you can implement any javascript you need based on the media queries you want.

### **install**

```bash
npm i @sjblurton/use-media-query

yarn add @sjblurton/use-media-query
```

### Import useMediaQuery

```bash
import useMediaQuery from "@sjblurton/use-media-query";
```

### **To call the hook...**

```bash
const isSmall = useMediaQuery("(min-width: 640px)")
```

### **Links**

GitHub: https://github.com/sjblurton/use-media-query
<br/>
NPM: https://www.npmjs.com/package/@sjblurton/use-media-query
npm package: @sjblurton/use-storage
Description: useStorage hook stores the data in local, or session storage. It takes a key as a string argument, and a default value as a string. The hook will search the storage the key in storage for a value and return if it there is one, otherwise it will use the de
Author: Simon Blurton
Latest version: 0.1.3

# useStorage

useStorage hook stores the data in local, or session storage. It takes a key as a string argument, and a default value as a string. The hook will search the storage the key in storage for a value and return if it there is one, otherwise it will use the default value.

If you want to store an object then use JON.stringify, and JON.parse to send a string to the hook.

return a tuple of [ string, setState function, and a remove function ].

### **To install...**

```bash
mpn i @sjblurton/use-storage

yarn add @sjblurton/use-storage
```

### **To import...**

```bash
import { useLocalStorage, useSessionStorage } from "../hooks/use-storage"
```

### **To call the hook...**

```bash
const [name, setName, removeName] = useSessionStorage("name", "foo")

const [age, setAge, removeAge] = useLocalStorage("age", "40")
```

### **Links**

GitHub: https://github.com/sjblurton/use-storage
<br/>
NPM: https://www.npmjs.com/package/@sjblurton/use-storage
npm package: @sjblurton/use-timeout
Description: useTime takes 2 arguments, the first is the function you would like to run after the the delay, the second is the delay in milliseconds. It returns a object with clear, and rest functions to clear, or reset the timeout.
Author: Simon Blurton
Latest version: 0.1.3

# useTimeout

useTime takes 2 arguments, the first is the function you would like to run after the the delay, the second is the delay in milliseconds. It returns a object with clear, and rest functions to clear, or reset the timeout.

### **To install the hook...**

```bash
npm i @sjblurton/use-timeout

yarn add @sjblurton/use-timeout
```

### **To call the hook...**

```bash
const { clear, reset } = useTimeout(() => callback(), 1000)
```

### **To clear timeout...**

```bash
clear()
```

### **To reset timeout...**

```bash
reset()
```

### **links**

GitHub Repo:
https://github.com/sjblurton/use-timeout
<br/>
NPM:
https://www.npmjs.com/package/@sjblurton/use-timeout
npm package: @sjblurton/use-toggle
Description: useToggle will default to false on initialization, unless provided a initial boolean value. It will return an tuple array `[value, toggleValue]` of the value, and a callback function. The value will be true or false, and the function can set the value to 
Author: Simon Blurton
Latest version: 0.1.4

# useToggle

useToggle will default to false on initialization, unless provided a initial boolean value. It will return an tuple array `[value, toggleValue]` of the value, and a callback function. The value will be true or false, and the function can set the value to true, false, or if not passed a value it wll toggle the value from the opposite of the current value.

### **Call the hook as true, default is false if no value is passed...**

`const [value, toggleValue] = useToggle(true)`

### **Toggle current value from true to false, or vice versa...**

`toggleValue()`

### **Set the value to false...**

`toggleValue(false)`

### **Set the value to true...**

`toggleValue(true)`

<br/>

### **Links**

GitHub: https://github.com/sjblurton/use-timeout
<br/>
NPM: https://www.npmjs.com/package/@sjblurton/use-toggle
npm package: @sjc5/crypto
Description: High-level crypto utils.
Author: Sam Cook
Latest version: 2.0.0

# @sjc5/crypto

Simple, high-level crypto utils in TypeScript.

Has two dependencies:
`tweetnacl` for the underlying crypto and `@stablelib/base64` for base64 encoding utils.

## Installation:

```sh
npm i @sjc5/crypto
```

## Usage:

```ts
import { random_key, encrypt, decrypt } from "@sjc5/crypto"

const message = "hello world"
const key = random_key()

const encrypted_message = encrypt({ message, key })
const decrypted = decrypt({ encrypted_message, key })
```
npm package: @sjc5/remix-loading-effect
Description: Super easy way to add nprogress loading bar to a Remix app.
Author: Sam Cook
Latest version: 0.0.5

# @sjc5/remix-loading-effect

## Description

Makes adding nprogress to your Remix app really easy. Makes the nprogress loading effect appear whenever there is:

1. a navigation in progress, or
2. a mutation in progress (specifically, a POST request via useFetcher)

Uses some reasonable debouncing to keep it from being too glitchy / janky.

## Installation

```sh
npm i @sjc5/remix-loading-effect
```

## Usage

In your app root, or wherever you want to use the loading effect, do the following:

```ts
import nProgress from "@sjc5/remix-loading-effect/nprogress.css"
import { useLoadingEffect } from "@sjc5/remix-loading-effect/use-loading-effect"

export function links() {
  return [{ rel: "stylesheet", href: nProgress }]
}

export default function App() {
  useLoadingEffect()

  return <html />
}
```

## Customize Color

- To customize color, add an `--nprogress-color` CSS variable to your global stylesheet:

```css
:root {
  --nprogress-color: green;
}
```
npm package: @sjc5/use-is-scrolled-down
Description: React helper hook for determining if a user is scrolled down. Useful for changing nav styles when a user is scrolled down.
Author: Sam Cook
Latest version: 1.0.2

# useIsScrolledDown

## Description

Use this React hook when you have a sticky topnav and you want to know when the user has scrolled down so you can change the nav styles.

A ref (`is_scrolled_down_ref`) is returned from the hook, and that ref should go in an absolutely positioned element at the top of the page, as shown below. The `is_scrolled_down` value returned from the hook is a boolean that tells you — you guessed it — whether the user has scrolled down. Use it to style your topnav, or whatever your heart desires.

## Usage

```tsx
import { useIsScrolledDown } from "@sjc5/use-is-scrolled-down"

export default function App() {
  const { is_scrolled_down_ref, is_scrolled_down } = useIsScrolledDown()

  return (
    <>
      <div
        ref={is_scrolled_down_ref}
        style={{
          position: "absolute",
          top: 0,
        }}
      />

      <StickyNav is_scrolled_down={is_scrolled_down} />

      <OtherStuff />
    </>
  )
}
```