Polylang Language Selector

LanguageSelector.tsx

import React from 'react';
import { StaticQuery, graphql } from 'gatsby';
import { StyledLocationSelector, StyledList } from './styles';



export const LanguageSelector: React.StatelessComponent<any> = ({language}) => (
  <StaticQuery
    query={graphql`
      query Languages {
        wp {
          languages {
            name
            homeUrl
          }
        }
      }
    `}
    render={({wp: {languages}}) => {
      if(languages.length > 1) {
      return (
      <StyledLocationSelector>
        <span>Language Select</span>
        <StyledList>
        {languages.map(({homeUrl, name}) => {
          return <li><a href={homeUrl} >{name}</a></li>
        })}
        </StyledList>
      </StyledLocationSelector>
    )}
    return null;
  }}
  />
);

export default LanguageSelector;