Get help on Discord

How to import Sanity's built-in slugify function?

9 replies
Last updated: Apr 22, 2020
Does Sanity expose its built-in 
slugify
function for import? I'm running some additional logic inside a custom 
slugify
function for a slug field, but I'd like to ultimately use Sanity's out of the box function within my custom one.
AI Update

No, Sanity doesn't expose its built-in slugify function as an importable module. However, the good news is that the default implementation is straightforward and uses a well-known package under the hood.

According to a response from the Sanity team, the defaultSlugify function is essentially this:

function defaultSlugify(value, type) {
  const maxLength = (type.options && type.options.maxLength) || 200
  const slugifyOpts = {truncate: maxLength, symbols: true}
  return value ? speakingurl(value, slugifyOpts) : ''
}

So Sanity uses the speakingurl package internally. You can install it yourself and use it in your custom slugify function:

npm install speakingurl

Then in your schema:

import speakingurl from 'speakingurl'

{
  name: 'slug',
  type: 'slug',
  options: {
    source: 'title',
    slugify: (value, type) => {
      // Your custom logic here
      const prefix = '/'
      
      // Use Sanity's default slugification
      const maxLength = (type.options && type.options.maxLength) || 200
      const slugifyOpts = {truncate: maxLength, symbols: true}
      const slug = value ? speakingurl(value, slugifyOpts) : ''
      
      return `${prefix}${slug}`
    }
  }
}

This approach lets you leverage the same slugification logic Sanity uses by default while adding your own customizations around it. The speakingurl package handles URL-friendly formatting, special character removal, and other typical slug transformations.

Show original thread
9 replies
Hi User, is this example helpful for you? It’s not an import but it goes in the same direction.
{
      name: 'nested',
      type: 'object',
      fields: [
        {
          name: 'slugWithSlugify',
          type: 'slug',
          title: 'Custom slugify function',
          description: 'This is a slug field that should update according to current title',
          options: {
            source: 'title',
            maxLength: 96,
            slugify: (value, type) => {
              return encodeURI(`${type.name}_${value}`).toLocaleLowerCase()
            }
          }
        }
      ]
    },
Hi User, is this example helpful for you? It’s not an import but it goes in the same direction.
{
      name: 'nested',
      type: 'object',
      fields: [
        {
          name: 'slugWithSlugify',
          type: 'slug',
          title: 'Custom slugify function',
          description: 'This is a slug field that should update according to current title',
          options: {
            source: 'title',
            maxLength: 96,
            slugify: (value, type) => {
              return encodeURI(`${type.name}_${value}`).toLocaleLowerCase()
            }
          }
        }
      ]
    },
Interesting...Thanks for chiming in! However, what I'm after is Sanity's default behavior (i.e. when no custom 
slugify
is written) exposed as a function.
A simplified version of what I'm wanting to accomplish is construct the slug the same way Sanity normally would by default, but then add a slash to the beginning.

I've already written my own slugifier function that mimics Sanity's as closely as I could get it to...Just thought it'd be nice if the default slugify logic could be reused.
🙂
Agreed and understood 🙂 I don’t think there’s an available part that you can implement for this specifically. However, the 
defaultSlugify
function is basically just this:
function defaultSlugify(value, type) {
  const maxLength = (type.options && type.options.maxLength) || 200
  const slugifyOpts = {truncate: maxLength, symbols: true}
  return value ? speakingurl(value, slugifyOpts) : ''
}
In other words, you could also make use of the 
speakingurl
package: https://www.npmjs.com/package/speakingurl
Agreed and understood 🙂 I don’t think there’s an available part that you can implement for this specifically. However, the 
defaultSlugify
function is basically just this:
function defaultSlugify(value, type) {
  const maxLength = (type.options && type.options.maxLength) || 200
  const slugifyOpts = {truncate: maxLength, symbols: true}
  return value ? speakingurl(value, slugifyOpts) : ''
}
In other words, you could also make use of the 
speakingurl
package: https://www.npmjs.com/package/speakingurl
Gotcha. I appreciate the help!
Agreed and understood 🙂 I don’t think there’s an available part that you can implement for this specifically. However, the 
defaultSlugify
function is basically just this:
function defaultSlugify(value, type) {
  const maxLength = (type.options && type.options.maxLength) || 200
  const slugifyOpts = {truncate: maxLength, symbols: true}
  return value ? speakingurl(value, slugifyOpts) : ''
}
In other words, you could also make use of the 
speakingurl
package: https://www.npmjs.com/package/speakingurl
Agreed and understood 🙂 I don’t think there’s an available part that you can implement for this specifically. However, the 
defaultSlugify
function is basically just this:
function defaultSlugify(value, type) {
  const maxLength = (type.options && type.options.maxLength) || 200
  const slugifyOpts = {truncate: maxLength, symbols: true}
  return value ? speakingurl(value, slugifyOpts) : ''
}
In other words, you could also make use of the 
speakingurl
package: https://www.npmjs.com/package/speakingurl

Sanity – Build the way you think, not the way your CMS thinks

Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.

Get started for freeExplore the demo

Was this answer helpful?