@licuido-ui/ui_language-choice v1.0.1

LanguageChoice

The LanguageChoice component is implemented to select the language get use of it. It also suggest through suggestion language and we can switch language by the select component

Author

• @author G Balaji balaji.g@crayond.co

Link

Story Book Link language

PlayGround

Try it have a fun codeBox

Installation

npm i @licuido-ui/ui_language-choice

Import component

import { LanguageChoice } from '@licuido-ui/ui_language-choice';

Usage

<LanguageChoice
  title='Select your language'
  titleStyle={{}}
  selectId='select'
  allLangArray={allData}
  allLangState={allLangState}
  suggestedLangArray={suggestionData}
  suggestedLangState={suggestedLangState}
  languagesBoxStyle={{}}
  languageCardProps={{
    allLangTitle: 'All languages',
    suggestedLangTitle: 'Suggested for you',
    languageId: 'language-id',
    languageTitleStyle: {},
    cardStyle: {},
    selectedCardSx: {},
    cardTitleStyle: {},
    cardSubtitleStyle: {},
    handleClick: (val, index, parent) => handleClick(val, index, parent),
  }}
  selectProps={{
    componentStylePropSx: {
      paddingRight: '3px',
    },
    label: '',
    labelPropsSx: {},
    selectParentSx: {
      display: 'flex',
      justifyContent: 'end',
    },
    rootStyleSx: {
      background: '#fff',
      paddingLeft: '6px',
    },
    inputRootStyleSx: {
      '& div': {
        paddingRight: '3px',
      },
    },
    value: optionValue,
    options: options,
    handleChange: handleChange,
    islabel: false,
    inputMaxWidth: '200px',
    inputMinHeight: '',
    inputMinWidth: '200px',
    inputMaxHeight: '',
    dropdownMaxHeight: '',
    dropdownMaxWidth: '200px',
    dropdownMinHeight: '',
    dropdownMinWidth: '200px',
    inputBackgroundColor: '',
    inputBorder: '',
    inputBorderRadius: '8px',
    inputColor: '',
    inputPropsSx: {
      fontWeight: '500',
    },
    inputStartEndornment: <GlobeSvg />,
    inputEndEndornment: <ArrowDown width='18px' color='red' />,
  }}
/>

Image

Sample Code

import { LanguageChoice} from '@licuido-ui/ui_language-choice';
import { ThemeProvider, createTheme } from '@mui/material/styles';
import { useState } from 'react';
import ArrowDown from './assets/arrowDown';
import SearchIcon from './assets/searchIcon';
import GlobeSvg from './assets/globleSvg';

function App() {

  // Update the selected options when the user makes a selection
  const handleSelectChange = (event: any, newValue: any) => {
    setSelectedOptions(newValue);
  };

  // Selected options state
  const [selectedOptions, setSelectedOptions] = useState([]);

  // All language selected state
  const [allLangState, setAllLangState] = useState({ langName: '', langText: '' });

  // Suggested language selected state
  const [suggestedLangState, setSuggestedLangState] = useState({ langName: '', langText: '' });

  const [optionValue, setOptionValue] = useState<any | any[]>([]);

  const allData = [
    {
      langName: 'Hindi',
      langText: 'हिन्दी',
    },
    {
      langName: 'Tamil',
      langText: 'தமிழ்',
    },
    {
      langName: 'Malayalam',
      langText: 'മലയാളം',
    },
    {
      langName: 'English',
      langText: 'English',
    },
    {
      langName: 'Arabic',
      langText: 'اَلْعَرَبِيَّةُ',
    },
    {
      langName: 'Sanskrit',
      langText: 'संस्कृत ',
    },
    {
      langName: 'Greek',
      langText: 'Ελληνικά',
    },
    {
      langName: 'Chinese',
      langText: '中國人',
    },
    {
      langName: 'Russian',
      langText: 'французский',
    },
    {
      langName: 'Marathi',
      langText: 'मराठी',
    },
  ];

  const suggestionData = [
    {
      langName: 'Hindi',
      langText: 'हिन्दी',
    },
    {
      langName: 'Tamil',
      langText: 'தமிழ்',
    },
    {
      langName: 'Malayalam',
      langText: 'മലയാളം',
    },
    {
      langName: 'English',
      langText: 'English',
    },
    {
      langName: 'Arabic',
      langText: 'اَلْعَرَبِيَّةُ',
    },
  ];

  const handleClick = (val: { langName: string; langText: string }, index: number, parent: string) => {
    // if all languages, set into all language selected state; otherwise, set in suggested language selected state
    if (parent === 'allData') {
      setAllLangState(val);
    } else {
      setSuggestedLangState(val);
    }
  };

  // This function maps your language data into options
  const options = allData.map((val) => {
    return {
      label: val.langName,
      value: val.langText,
    };
  });

  // handleChange function for the Select component
  const handleChange = (e: React.SyntheticEvent, val: any | any[]) => {
    const newValue = Array.isArray(val) ? val[0] : val;
    setOptionValue(val); // Update the optionValue state

    setAllLangState({
      langName: newValue.label as string,
      langText: newValue.value as string,
    });
  };

  return (
        <LanguageChoice
        title='Select your language'
        titleStyle={{ color: 'red' }}
        selectId='select'
        allLangArray={allData}
        allLangState={allLangState}
        suggestedLangArray={suggestionData}
        suggestedLangState={suggestedLangState}
        languagesBoxStyle={{}}
        languageCardProps={{
          allLangTitle: 'All languages',
          suggestedLangTitle: 'Suggested for you',
          languageId: 'language-id',
          languageTitleStyle: {},
          cardStyle: {},
          selectedCardSx: {},
          cardTitleStyle: {},
          cardSubtitleStyle: {},
          handleClick: (val, index, parent) => handleClick(val, index, parent),
        }}
        selectProps={{
          componentStylePropSx: {},
          label: '',
          labelPropsSx: {},
          selectParentSx: {
            display: 'flex',
            justifyContent: 'end',
          },
          rootStyleSx: {
            background: '#fff',
            paddingLeft: '6px',
          },
          inputRootStyleSx: {},
          value: optionValue,
          options: options,
          handleChange: handleChange,
          islabel: false,
          inputMaxWidth: '160px',
          inputMinHeight: '',
          inputMinWidth: '160px',
          inputMaxHeight: '500px',
          dropdownMaxHeight: '',
          dropdownMaxWidth: '150px',
          dropdownMinHeight: '',
          dropdownMinWidth: '150px',
          inputBackgroundColor: 'red',
          inputBorder: '',
          inputBorderRadius: '8px',
          inputColor: '',
          inputPropsSx: {
            fontWeight: '500',
            padding: '0 !important',
          },
          inputStartEndornment: <GlobeSvg />,
          inputEndEndornment: <ArrowDown width='18px' color='red' />,
        }}
      />

  );
}

export default App;

Props

select props contains,