react-tailwind-library

react-tailwind-library

Setup Tailwind CSS

Using official Tailwind Docs https://tailwindcss.com/docs/installation

Install

Using npm:

npm install react-tailwind-library

or using yarn:

yarn add react-tailwind-library

Add CSS in your Root Directory

import '../node_modules/react-tailwind-library/dist/style.css';

In ReactJs import above css in index.js file :

In NextJs import above css in _app.js file :

Usage

We can use it in React and Next JS projects

import React, { useState } from "react";
import { Combobox } from "react-tailwind-library";

// const data = ["hi", "hello", "hey", "hi", "hello", "hey"];
const data = [
  { name: "test1" },
  { name: "est1" },
  { name: "wert" },
  { name: "trey" },
  { name: "hgi" },
];
let inputProps = {
  onInput: () => {
    console.log("on input");
  },
};
function App() {
  const [value, setvalue] = useState([{ name: "test1" }]);
  return (
    <div className="App">
      <Combobox
        options={data}
        title={"combobox"}
        value={value}
        setvalue={setvalue}
        inputProps={inputProps}
        multiselect={true}
        textField={"name"}
      />
    </div>
  );
}

export default App;

// if multiselect `true` pass value as an array.

Props

Common props you may want to specify include:

• inputProps - Object containing on input events, attributes etc.(Object)

• multiselect - allow the user to select multiple values.(Boolean)

• options - specify the options the user can select from.(Array)

• title - label for the combobox.(String)

• textField - if options are array of objects then the key for options and value to display.(String)

• value - control the current value.(String/Object)

• setvalue - Function to set selcted value.(Function)

• More Features and Props wil be published on next version