Git Product home page Git Product logo

react-slugify's Introduction

react-slugify

Build status

Slugify a React node.

Usage

slugify(node[, options])

  • node String, Number, Fragment, Array of nodes
  • options Object (optional)
    • delimiter String (default is '-')
    • prefix String (default is '')

Examples

import slugify from 'react-slugify';

slugify('something I want to test');
// -> "something-i-want-to-test"

slugify(<span>Yes it works like that too</span>);
// -> "yes-it-works-like-that-too"

slugify(
  <>
    <span>and</span>
    <span>with</span>
    <span>fragments or arrays</span>
  </>
);
// -> "and-with-fragments-or-arrays"

slugify(<h3>Crème brulée receipe</h3>, { delimiter: '_' });
// -> creme_brulee_receipe

slugify(<h3>Crème brulée receipe</h3>, { prefix: 'user-content' });
// -> user-content-creme-brulee-receipe

slugify(<h3>Crème brulée receipe</h3>, {
  delimiter: '_',
  prefix: 'user-content',
});
// -> user-content_creme_brulee_receipe

react-slugify's People

Contributors

chasoft avatar kassfir avatar martpie avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

react-slugify's Issues

Polish accents fix

Below is a fix to support Polish alphabet (https://en.wikipedia.org/wiki/Polish_alphabet):

src/slugify.ts

const accents =
    'ÀÁÂÃÄÅĄàáâãäåąÒÓÔÕÕÖØòóôõöøÈÉÊËĘèéêëðęÇĆçćÐÌÍÎÏìíîïÙÚÛÜùúûüÑñŠŚšśŸÿýŽŹŻžźżŁłŃń';
  const fixes =
    'AAAAAAAaaaaaaaOOOOOOOooooooEEEEEeeeeeeCCccDIIIIiiiiUUUUuuuuNnSSssYyyZZZzzzLlNn';

src/__tests__/slugify.tsx

it('should handle strings correctly', () => {
    // ...
    expect(slugify('Mężny bądź chroń pułk twój i sześć flag')).toBe('mezny-badz-chron-pulk-twoj-i-szesc-flag');
  });

I am facing almost every rendaring "Error: ENOENT: no such file or directory, open 'C:\Users\Graphics 1\Desktop\TSC-MERN\client\node_modules\react-slugify\src\slugify.ts'"

Hello Dear,
I am facing almost every rendering "Error: ENOENT: no such file or directory, open 'C:\Users\Graphics 1\Desktop\TSC-MERN\client\node_modules\react-slugify\src\slugify.ts'".

I removed this package and reinstall but could not be fixed! Please help me to fix the problem.

[0] Server is running on http://localhost:8080
[0] Database connected at localhost:27017
[1] Compiled with warnings.
[1]
[1] Failed to parse source map from 'C:\Users\Graphics 1\Desktop\TSC-MERN\client\node_modules\react-slugify\src\slugify.ts' file: Error: ENOENT: no such file or directory, open 'C:\Users\Graphics 1\Desktop\TSC-MERN\client\node_modules\react-slugify\src\slugify.ts'
[1]
[1] Search for the keywords to learn more about each warning.
[1] To ignore, add // eslint-disable-next-line to the line before.
[1]
[1] WARNING in ./node_modules/react-slugify/dist/slugify.js
[1] Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
[1] Failed to parse source map from 'C:\Users\Graphics 1\Desktop\TSC-MERN\client\node_modules\react-slugify\src\slugify.ts' file: Error: ENOENT: no such file or directory, open 'C:\Users\Graphics 1\Desktop\TSC-MERN\client\node_modules\react-slugify\src\slugify.ts'
[1]
[1] webpack compiled with 1 warning
[1] No issues found.
[0] GET /api/v1/projects/get-all-projects 200 37.021 ms - 5271
[0] GET /public/project-images/yousuf4you_rainy_day_on_sea_beach_with_trees_18c9fc52-e9b3-41a7-a8e2-48f879415c9d-1669207480651.png 304 3.148 ms - -
[0] GET /public/project-images/lumitar-tgexxizain4-unsplash-1669207599578.jpg 304 2.049 ms - -
[0] GET /public/project-images/pexels-pixabay-220502-1669207711356.jpg 304 0.639 ms - -`

slug error

Get error `Uncaught TypeError: (0 , import_react_slugify.default) is not a function error`

Hi,

I have this issue when using react-slugify in a custom hook and component in React. This is a library built with ViteJs.

In each file, this is how I use it :

import slugify from "react-slugify";

const newSlug = `${hash({
    foo: `${resourceName}${uniqueId}`,
  })}-${slugify(resourceName)}`

It is used in a component created previously in my App without error.

Uncaught TypeError: (0 , import_react_slugify.default) is not a function error

Then I exported the component and the hook in the library.

Is there something wrong ?

Turkish Characters Support

Hi,

Is it possible to add Turkish characters?

turkishLetters = [ "ç", "ğ", "ı", "ö", "ş", "ü", "Ç", "Ğ", "İ", "Ö", "Ş", "Ü", ];

Czech characters support

I found that some symbols of the Czech alphabet are missing. Would it be possible to add them?

  • Ěě
  • Řř
  • Ůů

Lack of support for Latvian characters

Discovered that some characters from the Latvian alphabet in the stripAccents function accents are missing.

  • Āā
  • Čč
  • Ēē
  • Ģģ
  • Īī
  • Ķķ
  • Ļļ
  • Ņņ
  • Šš
  • Ūū
  • Žž

Console Logging in format Function

Description

After upgrading from react-slugify version 3.0.2 to 4.0.0, I noticed that the library logs the harmonized string to the console.

function format(
  input: string,
  delimiter: string,
  ignoreInvalid = false
): string {
  const harmonized = stripAccents(input).trim().toLowerCase();
  console.log(harmonized); // <-- 
  const safeDelimiter = getSafeRegexpString(delimiter);
  ...
};

End with delimiter

In some case like...
A little slug of mine @ -> a-little-slug-of-mine-
A little slug of mine - Slug -> a-little-slug-of-mine---slug

I added something like this:

...
.replace(/\-\-+/g, '-') 
.replace(/\-+$/g, '')

to replace multiple -, and to remove - at the end

btw, great package.

Triplet Delimiter

I've had this issue we're i get triplet delimiters. See simplified example below.

Currently
"Hello - World" ➜ "hello---world"

Wanted Result
"Hello - World" ➜ "hello-world"

I've resolved it by sadly replacing react-slugify for the time being with the following function:

export const slugifyer = (text) => {
const mapObj = {
å: "a",
ä: "a",
ö: "o",
é: "e",
ü: "u",
ç: "c",
è: "e",
ê: "e",
ë: "e",
í: "i",
ì: "i",
î: "i",
ï: "i",
ñ: "n",
ø: "o",
ó: "o",
ò: "o",
ô: "o",
õ: "o",
ú: "u",
ù: "u",
û: "u",
ý: "y",
ÿ: "y",
æ: "ae",
œ: "oe",
};
text = text
.toLowerCase()
.trim()
.replace(
/(?:å|ä|ö|é|ü|ç|è|ê|ë|í|ì|ï|ñ|ø|ó|ò|ô|õ|ú|ù|û|ý|ÿ|æ|œcatch)/gm,
(matched) => mapObj[matched]
);

text = text.replace(/\s+|-{2,}|//gm, "-").replace(/\s+|-{2,}|//gm, "-"); // Line and the one below fixes issue

text = text.replace(/[^a-z0-9\s-]+|^-+|-+$/gm, ``);

return text;
};

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.