SelecTron

The SelecTron component is a React functional component that fetches data and displays it in a selectable dropdown list. It handles various states such as loading, error, and data display.

Props

`prompt`

Type: string
Description: The prompt text used to fetch data.

`title`

Type: string
Description: The title or placeholder for the select dropdown.

`onValueChange`

Type: (value: string) => void
Description: Callback function that is triggered when the selected value changes.

`selectTriggerClassName`

Type: string
Description: CSS class to style the Select Trigger.

`selectOptionsClassName`

Type: string
Description: CSS class to style the Select Panel where the options are displayed.

`selectedItemClassName`

Type: string
Description: CSS class to style the Selected item from the optionsl panel.

`...props`

Type: React.InputHTMLAttributes<HTMLSelectElement>
Description: Additional HTML attributes to be passed to the select element.

Example Usage

import React from 'react';
import {Selectron} from '@revivesoft/inputron';
 
const Example = () => (
  return (<Selectron
    prompt="Enter your prompt here..."
    title="Select an option"
    onValueChange={(value) => console.log(value)}
  />)
);
 
export default Example;

Example with Styling

import React from 'react';
import {Selectron} from '@revivesoft/inputron';
 
const Example = ({location}:{location:string}) => (
    return ( <SelecTron
          key={location}
          onValueChange={(value) => console.log("value", value)}
          className={"text-white bg-white"}
          selectOptionsClassName={"bg-white text-black font-bold text-md"}
          selectTriggerClassName={"bg-white text-black font-bold text-md"}
          selectedItemClassName={
            "bg-black-500 text-black text-md font-semibold hover:bg-black  hover:text-white"
          }
          title={"Transportation"}
          prompt={`list of 5 public transportation types in ${location} return an icon at the begining of each item`}
        />)
);
export default Example;

TextareaTron FeedbackTron