Package Exports

react-language-selector-lite
react-language-selector-lite/dist/LanguageSelector.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-language-selector-lite) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-language-selector-lite

react-language-selector-lite is a lightweight and customizable React component for selecting languages with support for search, themes (light and dark), and flexible configurations. This package is built using styled-components for seamless integration into any React project🚀.

Features

Select from a comprehensive list of languages.
Search functionality to quickly find languages.
Supports light and dark themes.
Fully customizable labels and placeholders.
Option to include detailed language information.
Flexible sorting and filtering of languages.
Licensed under MIT.

Installation

Install the package via npm or yarn:

npm install react-language-selector-lite

yarn add react-language-selector-lite

Usage

Basic Example

import React from 'react';
import LanguageSelector from 'react-language-selector-lite';

const App = () => {
  const handleLanguageSelect = (language) => {
    console.log('Selected language:', language);
  };

  return (
    <div>
      <LanguageSelector onSelect={handleLanguageSelect} theme="dark" />
    </div>
  );
};

export default App;

Props

Prop Name	Type	Default Value	Description
`onSelect`	`(language: any) => void`	Required	Callback function triggered when a language is selected.
`includeDetails`	`boolean`	`false`	Whether to include detailed language info in `onSelect`.
`geoCoverage`	`string`: `"local"`/`"international"`/ `"both"`	`"both"`	Display local names or international names of languages.
`enableSearch`	`boolean`	`true`	Enable search functionality.
`options`	`string[]`	`[]`	Array of language codes to limit available options.
`sortOptions`	`boolean`	`true`	Whether to sort the list of languages alphabetically.
`buttonLabel`	`string`	`"Select language"`	Label for the toggle button.
`placeholder`	`string`	`"Search language..."`	Placeholder text for the search input.
`className`	`string`	`""`	Additional class names for custom styling.
`useDefaultToggleButton`	`boolean`	`true`	When set to `false`, the default toggle button will be hidden, and the select container will always be visible, allowing users to provide their own custom toggle button
`theme`	`"light" / "dark"`	`"light"`	Theme of the component.

Styling

The component uses styled-components for styling, so there's no need to import an additional CSS file. You can add custom styling by passing a className prop to the component.

Dark Theme

To use the dark theme, simply set the theme prop to "dark":

<LanguageSelector onSelect={handleLanguageSelect} theme="dark" />

License

This project is licensed under the MIT License.

Contributing

Contributions are welcome! Please fork the repository and submit a pull request for review.

Steps to Contribute

Fork the repository: GitHub repository
Create a new branch: git checkout -b feature-branch-name.
Make your changes and commit: git commit -m 'Add some feature'.
Push to the branch: git push origin feature-branch-name.
Open a pull request.

Support

If you encounter any issues or have suggestions, feel free to open an issue on GitHub or contact us directly.

Acknowledgments

langs: Used for fetching language details.

Thank You

Thank you for using react-language-selector-lite! Your support is greatly appreciated.

Buy Me a Coffee

If you found this package useful, please consider buying me a coffee.

Author

- Jamiu Shaibu