How to use

kebabCase

function

in

lodash

const ArticlesCategoriesSelection = ({ categories }) => (
 <div className="articles-categories-selection">
  <Link to="/articles">All</Link>
  {categories.map((category, i) => (
   <Link 
    activeClassName="active" 
    to={`/articles/categories/${kebabCase(category)}/`} 
    key={i}>{category}
   </Link>
  ))}
 </div>
)

const ArticleCategory = ({ category }) => (
 <Link className="article-category" to={`/articles/categories/${kebabCase(category)}`}>{category}</Link>
)

/**
 * Slugify any given characters.
 *
 * @method slug
 *
 * @param {string|number}  text  Text to Slugify
 *
 * @return {string}
 */
function slug (text) {
 if (text === void 0) return ''

 return kebabCase(
  removeNonAsciiChar(
   transform(
    text.toString()
   )
  )
 )
}

/**
   * Configure Yargs for this command. Subclasses can override this to do anything
   * specific that they need to do at config time
   *
   * @param {String} commandName Name of the command
   * @param {Yargs} yargs Yargs instance
   * @param {Array} extensions Array of discovered extensions
   * @return {Yargs} Yargs instance after options are configured
   *
   * @static
   * @method configureOptions
   * @public
   */
  static configureOptions(commandName, yargs, extensions, onlyOptions) {
    each(this.options || {}, (option, optionName) => {
      yargs = yargs.option(kebabCase(optionName), option);
    });

    if (onlyOptions) {
      return yargs;
    }

    if (this.longDescription) {
      yargs.usage(this.longDescription);
    }

    yargs.epilogue('For more information, see our docs at https://ghost.org/docs/api/ghost-cli/');

    return yargs;
  }

const ArticlesNavigation = ({ categories, tags }) => (
 <div className="categories">
  <div className="desktop-subscribe-form-container">
   <SmallSubscribeForm/>
  </div>
  <br/>
  <div className="categories--parent-category">Tags</div>
  <div className="categories--tags-container">
   {uniq(tags)
    .filter((e) => !!e)
    .map((tag, i) => (
    <Link 
     activeClassName="active"
     to={`/articles/tags/${kebabCase(tag)}/`} 
     key={i}>#{tag}</Link>
   ))}
  </div>
  
 </div>
)

render() {
    let filterId = kebabCase(this.props.filterType);

    return(
      <div className="filter">
        <label for={filterId}>{this.props.label}:</label>
        <div className="select-container">
          <Select 
            name={this.props.filterType}
            value={this.props.currentFilter}
            options={this.props.options}
            clearable={this.props.clearable}
            searchable={false}
            onChange={this.props.onChange}
            placeholder={this.props.placeholder}
          />
        </div>
      </div>
    );
  }

"position": 3,
"name": contextValue,
"item": `https://khalilstemmler.com/articles/${contextElement}/${kebabCase(contextValue)}`

moduleName: kebabCase(props.moduleName).toLowerCase(),
camelModule: camelCase(props.moduleName),
description: props.description,

<AboutTheAuthor {...Authors.khalil}/>
<p>View more in <Link to={`/articles/categories/${kebabCase(category)}`}>{category}</Link></p>

const Tags = ({ tags }) => (
 <div className="tags-container">
  {tags && tags
   .filter(t => !!t)
   .map((tag, i) => (
    <Link
     to={`/articles/tags/${kebabCase(tag)}/`}
     className="tag"
     key={i}
    >
     {tag.toLowerCase()}
    </Link>
   ))}
 </div>
)