React Slug Generator

Create live URL slugs in your React components. Wrap a small slugify helper in useMemo so the slug updates as the user types a title — ideal for blog editors, dashboards and any form that maps a name to a URL.

import { useMemo } from 'react';

const slugify = (text) =>
  text.toLowerCase().normalize('NFKD')
    .replace(/[\u0300-\u036f]/g, '')
    .replace(/[^a-z0-9]+/g, '-')
    .replace(/^-+|-+$/g, '');

function SlugPreview({ title }) {
  const slug = useMemo(() => slugify(title), [title]);
  return <code>/blog/{slug}</code>;
}