Auto React.js Full idea Component demo in Browser Using (js) Javascript Full  Project Source code

Welcome Learner today in this blog post we will be Develop an Auto React.js Full idea Component demo in Browser Using (js) Javascript Full  Project Source code. All the Full source code of the application is below (here) Down.

In order to lets get started, you create a file index.html and use this source code.

 

index.html 

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.9.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.production.min.js"></script>

 

Now Make a style.css file and copypaste the final source code

style.css 

 

* {
  font-family: sans-serif;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.App {
  padding: 50px 20px;
}
.user-input {
  width: 250px;
  padding: 5px 3px;
}
.suggestions-list {
  list-style: none;
  padding: 0;
  max-height: 160px;
  overflow-y: auto;
  max-width: 250px;
}
.suggestion {
  background-color: rgb(226, 181, 181);
  padding: 10px;
  color: rgb(65, 65, 65);
  cursor: pointer;
}
.suggestion:hover {
  background-color: rgba(238, 238, 238, 0.1);
}
.selected {
  background-color: rgb(148, 44, 44);
  color: rgb(238, 223, 223);
}

READ Django Stripe SaaS Boilerplate Template

create a script.js

script.js 

 

"use strict";

const SuggestionsList = props => {
  const {
    suggestions,
    inputValue,
    onSelectSuggestion,
    displaySuggestions,
    selectedSuggestion
  } = props;

  if (inputValue && displaySuggestions) {
    if (suggestions.length > 0) {
      return /*#__PURE__*/React.createElement("ul", {
        className: "suggestions-list"
      }, suggestions.map((suggestion, index) => {
        const isSelected = selectedSuggestion === index;
        const classname = `suggestion ${isSelected ? "selected" : ""}`;
        return /*#__PURE__*/React.createElement("li", {
          key: index,
          className: classname,
          onClick: () => onSelectSuggestion(index)
        }, suggestion);
      }));
    } else {
      return /*#__PURE__*/React.createElement("div", null, "No suggestions available...");
    }
  }

  return /*#__PURE__*/React.createElement(React.Fragment, null);
};

const Autocomplete = () => {
  const [inputValue, setInputValue] = React.useState("");
  const [filteredSuggestions, setFilteredSuggestions] = React.useState([]);
  const [selectedSuggestion, setSelectedSuggestion] = React.useState(0);
  const [displaySuggestions, setDisplaySuggestions] = React.useState(false);
  const suggestions = ["Oathbringer", "American Gods", "A Game of Thrones", "Prince of Thorns", "Assassin's Apprentice", "The Hero of Ages", "The Gunslinger"];

  const onChange = event => {
    const value = event.target.value;
    setInputValue(value);
    const filteredSuggestions = suggestions.filter(suggestion => suggestion.toLowerCase().includes(value.toLowerCase()));
    setFilteredSuggestions(filteredSuggestions);
    setDisplaySuggestions(true);
  };

  const onSelectSuggestion = index => {
    setSelectedSuggestion(index);
    setInputValue(filteredSuggestions[index]);
    setFilteredSuggestions([]);
    setDisplaySuggestions(false);
  };

  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h1", null, "React Autocomplete"), /*#__PURE__*/React.createElement("input", {
    className: "user-input",
    type: "text",
    onChange: onChange,
    value: inputValue
  }), /*#__PURE__*/React.createElement(SuggestionsList, {
    inputValue: inputValue,
    selectedSuggestion: selectedSuggestion,
    onSelectSuggestion: onSelectSuggestion,
    displaySuggestions: displaySuggestions,
    suggestions: filteredSuggestions
  }));
};

function App() {
  return /*#__PURE__*/React.createElement("div", {
    className: "App"
  }, /*#__PURE__*/React.createElement(Autocomplete, null));
}

const rootElement = document.getElementById("root");
ReactDOM.render( /*#__PURE__*/React.createElement(App, null), rootElement);

Leave a Comment