File Name Normalizer

This tool will convert any text into a valid file name. It will remove all special characters and replace spaces with hyphens.

Intro

This tool will convert any text into a valid file name. It will remove all special characters and replace spaces with hyphens. It will also convert all characters to lowercase. This tool is useful for converting file names from other sources into a valid file name. For example, if you want to convert a file name from a PDF document into a valid file name, you can use this tool to do so.

Preview

Source Code

text-converter.tsx

'use client'
 
import React, { useState } from 'react'
import { useToast } from '@/hooks/use-toast'
 
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
 
export function TextConverter() {
  const [inputText, setInputText] = useState('')
  const [convertedText, setConvertedText] = useState('')
  const { toast } = useToast()
 
  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setInputText(e.target.value)
    setConvertedText(
      e.target.value
        .replace(/[^a-zA-Z0-9 ]/g, '')
        .replace(/ /g, '-')
        .toLowerCase()
    )
  }
 
  const handleCopyClick = () => {
    navigator.clipboard.writeText(convertedText)
    toast({
      title: 'Copied!',
      description: 'The converted text has been copied to your clipboard.'
    })
  }
  return (
    <section>
      <div className="mb-5 flex w-full max-w-sm items-center space-x-2">
        <Input
          type="text"
          placeholder="Input text here"
          value={inputText}
          onChange={handleInputChange}
        />
        <Button
          type="button"
          onClick={handleCopyClick}
          disabled={inputText === ''}
        >
          Copy
        </Button>
      </div>
      <div>
        <span className="font-semibold">Result:</span> {convertedText}
      </div>
    </section>
  )
}

Introduction JSON Formatter