0.3.0 • Published 3 months ago
commandkey v0.3.0
Command Key
A simple command palette for React.
Setup
Install Tailwind CSS
To use CommandKey, you need to install Tailwind CSS for styling.
npm install -D tailwindcss postcss autoprefixer tailwind-merge
npx tailwindcss init -p
Configure tailwindcss:
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
"./node_modules/commandkey/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
Add directives to your CSS:
@tailwind base;
@tailwind components;
@tailwind utilities;
Install CommandKey
npm install commandkey
Usage
import { Command, CommandList, CommandInput, CommandOption } from 'commandkey';
import { useState } from 'react';
export default function App() {
const [open, setOpen] = useState(false);
return (
<>
<button onClick={() => setOpen(true)}>Open modal</button>
<Command open={open} onClose={() => setOpen(false)}>
<CommandInput placeholder="Search" />
<CommandList>
<CommandOption>Apple</CommandOption>
<CommandOption>Orange</CommandOption>
<CommandOption>Pear</CommandOption>
</CommandList>
</Command>
</>
);
}
If you want more details. Check the documentation
Contributing
- Clone the repository:
git clone https://github.com/martinval11/commandkey.git
- Install dependencies:
npm install
# or
yarn install
# or
pnpm install
# or
bun install
- Run vite:
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
- Open localhost:3000 in your browser to see the app.
Tech Stack
License
0.3.0
3 months ago
0.2.9
3 months ago
0.2.8
3 months ago
0.2.7
4 months ago
0.2.6
4 months ago
0.2.3
4 months ago
0.2.2
4 months ago
0.2.5
4 months ago
0.2.4
4 months ago
0.2.1
4 months ago
0.2.0
4 months ago
0.1.9
4 months ago
0.1.8
4 months ago
0.1.7
4 months ago
0.1.6
4 months ago
0.1.5
4 months ago
0.1.3
4 months ago
0.1.2
4 months ago
0.1.1
4 months ago
0.0.9
4 months ago
0.0.8
4 months ago
0.0.7
4 months ago
0.0.6
4 months ago
0.0.4
4 months ago
0.0.3
4 months ago
0.0.2
4 months ago
0.0.1
4 months ago
0.0.0
4 months ago