useRandomString

The useRandomString hook provides a convenient way to generate randomized strings with customizable settings. This hook enables you to define string length and choose whether to include symbols, numbers, and uppercase letters. The string is updated automatically whenever the settings are changed.

Usage

Make sure you have @ridgehkr/useful installed in your application. If not, you can get started by following the installation instructions.
Import and use the useRandomString hook in your component:

import { useRandomString } from '@ridgehkr/useful'

Example

Here's an example of how you can use useRandomString to create a password generator component. In this example, useRandomString is used to generate a random string based on the current settings. The resulting string is updated automatically whenever the settings are changed.

PasswordGenerator.tsx

import { useRandomString } from '@ridgehkr/useful'
 
function PasswordGenerator() {
  const {
    value,
    length,
    setLength,
    symbols,
    includeSymbols,
    numbers,
    includeNumbers,
    uppercase,
    includeUppercase,
  } = useRandomString({
    length: 12,
    symbols: true,
    numbers: true,
    uppercase: true,
  })
 
  return (
    <div>
      <h1>Password Generator</h1>
 
      <h2>{value}</h2>
 
      <p>
        <label>
          Length:
          <input
            type='number'
            min={1}
            value={length}
            onChange={(e) => setLength(parseInt(e.target.value))}
          />
        </label>
      </p>
 
      <p>
        <label>
          <input
            type='checkbox'
            checked={uppercase}
            onChange={(e) => includeUppercase(!!e.target.checked)}
          />{' '}
          Include Uppercase Characters? {uppercase ? 'Yes' : 'No'}
        </label>
      </p>
 
      <p>
        <label>
          <input
            type='checkbox'
            checked={symbols}
            onChange={(e) => includeSymbols(!!e.target.checked)}
          />{' '}
          Include Symbols? {symbols ? 'Yes' : 'No'}
        </label>
      </p>
 
      <p>
        <label>
          <input
            type='checkbox'
            checked={numbers}
            onChange={(e) => includeNumbers(!!e.target.checked)}
          />{' '}
          Include Numbers? {numbers ? 'Yes' : 'No'}
        </label>
      </p>
    </div>
  )
}

API Reference

Hook Signature

useRandomString(options: StringGeneratorOptions): RandomString

Parameters

useRandomString accepts a StringGeneratorOptions object of arguments to initially define the properties of the generated string. All of these parameters can be changed later using the functions returned by the hook.

Parameter	Type	Required?	Description
`len`	number	false	The length of the string to generate
`symbols`	boolean	false	Whether or not to include symbols in the generated string
`numbers`	boolean	false	Whether or not to include numbers in the generated string
`uppercase`	boolean	false	Whether or not to include uppercase characters in the generated string

Return Value

useRandomString returns a RandomString object with the following properties:

Property	Type	Description
`value`	`string`	The generated string based on the current settings
`length`	`number`	The length of the generated string
`setLength(length: number)`	`(length: boolean): void => {}`	A function to set the string length
`symbols`	`boolean`	Whether or not symbols are included
`includeSymbols(include: boolean)`	`(include: boolean): void => {}`	A function to toggle the inclusion of symbols
`numbers`	`boolean`	Whether or not numbers are included
`includeNumbers(include: boolean)`	`(include: boolean): void => {}`	A function to toggle the inclusion of numbers
`uppercase`	`boolean`	Whether or not uppercase letters are included
`includeUppercase(include: boolean)`	`(include: boolean): void => {}`	A function to toggle the inclusion of uppercase letters

usePagination useScrollPosition