How to use param-case - 10 common examples

function getParamCasePath(path: string): string {
    // example /Users/foo/code/test/components/componentFile.vue
    let pathArr = path.split('/');

    // gets the last element componentFile.foo
    let fileName = pathArr[pathArr.length - 1];

    // gets the actual file name componentFile
    let newFileName = fileName.split('.vue')[0];

    // paramcases componentFile to component-file and adds. .vue at the end
    let paramCaseFile = paramCase(newFileName) + '.vue';

    // replaces last element of the array, with the param'd version of the filename
    pathArr[pathArr.length - 1] = paramCaseFile;

    // returns joined pathname with slashes
    return pathArr.join('/').toString();
}

return match({ routes, location: req.url }, (error, redirectLocation, renderProps) => {
    if (error) {
      res.status(500).send(error.message);
    } else if (redirectLocation) {
      res.redirect(302, redirectLocation.pathname + redirectLocation.search);
    } else if (renderProps) {
      const cacheName = `${paramCase(req.url) || 'index'}.html`;
      const cachePath = path.join(opts.cwd, cacheName);

      const provider = (
        
          
        
      );

      fs.statAsync(cachePath)
      .then(() => res.sendFile(cachePath))
      .catch(() => (
        createSession(() => {
          renderToStaticMarkup(provider);
        }, { timeout: 5000 })
        .then(() => {
          const $ = cheerio.load(opts.html);

const containerParams = Object.keys(containerStyle).map(key => {
    const value = containerStyle[key]
    return `${paramCase(key)}: ${value};`
  })
  const panes = buildPanes(state)

getStateFromAttributes() {
    const defaults = this.defaults();

    const state = {};

    for (const key of Object.keys(defaults)) {
      const attrName = paramCase(key);
      const attrVal = this.getAttribute(attrName);
      const typedValue = simpleType(defaults[key], attrVal);

      if (typedValue != null) {
        state[key] = typedValue;
      }
    }

    return state;
  }

function renderVueComponents(script: Object, components: Object) {
    let componentsString = '';
    for (var component in components) {
        if (components.hasOwnProperty(component)) {
            let currentComponent = components[component];
            if (currentComponent.type === types.SUBCOMPONENT) {
                componentsString = componentsString + `Vue.component('${paramCase(currentComponent.name)}', ${scriptToString(currentComponent.script)});\n`;
            }
        }
    }

    return componentsString;
}

Object.keys(props).reduce((twClasses, key) => {
    if (
      ignore.includes(key) ||
      props[key] === false ||
      typeof props[key] === 'undefined'
    )
      return twClasses

    let type = key.indexOf('-') > 0 ? key.substring(0, key.indexOf('-')) : key
    const variant =
      key.indexOf('-') > 0 ? key.substring(key.indexOf('-') + 1) : key

    if (!tailwindProps.includes(type)) return twClasses

    if (hasUpperCase(type)) {
      type = paramCase(type)
    }

    if (propVariants.includes(variant)) {
      if (variant === 'hocus') {
        return [
          ...twClasses,
          tailwindPropToClassName(`hover:${type}`, props[key], prefix),
          tailwindPropToClassName(`focus:${type}`, props[key], prefix),
        ]
      }

      return [
        ...twClasses,
        tailwindPropToClassName(`${variant}:${type}`, props[key], prefix),
      ]
    }

return posts.map(post => {
      post.description = post.description.replace(/<(.|\n)*?>/g, "").trim();
      post.description = post.description.substring(0, 250) + "...";

      const patt = /p=(\d+)$/;
      const guid = patt.exec(post.guid)[1];

      const postTitle = paramCase(this.removeVnStr(post.title));

      return (

return jobs.map(job => ({
    id: job.id,
    title: job.title,
    department: job.department,
    description: sanitizeHtml(job.description),
    fullDescription: sanitizeHtml(job.description + job.requirements + job.benefits),
    applicationUrl: job.application_url,
    slug: paramCase(job.title),
    datePosted: job.created_at,
  }));
};

if (!post.thumbnail.includes("https://cdn")) {
        const imageArr = [
          "https://cdn-images-1.medium.com/max/1024/1*FqumB-IFSXQk9wW9ElYvqw.jpeg",
          "https://cdn-images-1.medium.com/max/1024/0*k5_YVMBW9-yD10yN",
          "https://cdn-images-1.medium.com/max/1024/1*BUA0Pq-I3lEqnFv1sVl47w.jpeg",
          "https://cdn-images-1.medium.com/max/1024/1*kIC9VHwIsNQAIOpjraB-Iw.jpeg",
          "https://cdn-images-1.medium.com/max/1024/0*DdOLxRL3KAHZ7Nwq",
        ];

        post.thumbnail = imageArr[Math.floor(Math.random() * imageArr.length)];
      }

      return (
        
          

private _buildClassComponent(node: OperationDefinitionNode, documentVariableName: string, operationType: string, operationResultType: string, operationVariablesTypes: string): string {
    const componentName: string = this.convertName(node.name.value + 'Component');
    const apolloStencilComponentTag = paramCase(`Apollo${operationType}`);
    const rendererSignature = toPascalCase(`${operationType}Renderer`);

    return `
@Component({
    tag: '${paramCase(`Apollo${toPascalCase(node.name.value)}`)}'
})
export class ${componentName} {
    @Prop() renderer: import('stencil-apollo').${rendererSignature}<${operationResultType}, ${operationVariablesTypes}>;
    @Prop() variables: ${operationVariablesTypes};
    render() {
        return <${apolloStencilComponentTag} ${operationType.toLowerCase()}={ ${documentVariableName} } variables={ this.variables } renderer={ this.renderer } />;
    }
}
      `;
  }