viclafouch / mui-chips-input

šŸ“Œ A chips input designed for MUI (Material ui) V6
https://viclafouch.github.io/mui-chips-input/
MIT License
83 stars 19 forks source link
chips form input material mui react typescript

Material UI chips input

A chips input designed for the React library Material UI

[![license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/viclafouch/mui-chips-input/blob/master/LICENSE) ![ts](https://badgen.net/badge/Built%20With/TypeScript/blue) [![npm](https://img.shields.io/npm/v/mui-chips-input)](https://www.npmjs.com/package/mui-chips-input)

Installation

// with npm
npm install mui-chips-input

// with yarn
yarn add mui-chips-input

Usage

import React from 'react'
import { MuiChipsInput } from 'mui-chips-input'

const MyComponent = () => {
  const [chips, setChips] = React.useState([])

  const handleChange = (newChips) => {
    setChips(newChips)
  }

  return (
    <MuiChipsInput value={chips} onChange={handleChange} />
  )
}

Next.js integration

Learn how to use MUI chips input with Next.js

Once you have installed MUI Chips Input in your next.js project, it is important to transpile it as it is an ESM package first.

/** @type {import('next').NextConfig} */
const nextConfig = {
 transpilePackages: ['mui-chips-input'],
 // your config
}

module.exports = nextConfig

Documentation

Changelog

Go to GitHub Releases

TypeScript

This library comes with TypeScript "typings". If you happen to find any bugs in those, create an issue.

šŸ› Bugs

Please file an issue for bugs, missing documentation, or unexpected behavior.

šŸ’” Feature Requests

Please file an issue to suggest new features. Vote on feature requests by adding a šŸ‘. This helps maintainers prioritize what to work on.

LICENSE

MIT