https://github.com/doganozturk/baklava-input-mask-react-examples
A Vite-based demonstration application illustrating the integration and compatibility between the Baklava Design System and different input masking libraries.
https://github.com/doganozturk/baklava-input-mask-react-examples
baklava-design react web-components
Last synced: 5 months ago
JSON representation
A Vite-based demonstration application illustrating the integration and compatibility between the Baklava Design System and different input masking libraries.
- Host: GitHub
- URL: https://github.com/doganozturk/baklava-input-mask-react-examples
- Owner: doganozturk
- Created: 2024-03-15T13:34:50.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-05-06T13:01:57.000Z (about 2 years ago)
- Last Synced: 2025-05-30T19:04:00.718Z (about 1 year ago)
- Topics: baklava-design, react, web-components
- Language: JavaScript
- Homepage: https://baklava-input-mask-react-examples.vercel.app
- Size: 154 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Integration Showcase: Baklava Design System (React) with Multiple Input Masking Libraries
## Overview
This project demonstrates the integration of the Baklava Design System with various input masking libraries including Maskito and IMask. The primary goal is to showcase versatile compatibility and how these tools can be utilized together within a React application.
## Baklava Design System
[Trendyol](https://github.com/Trendyol)'s Baklava Design System offers a robust set of guidelines, components, and tools designed to assist developers and designers in creating consistent, visually appealing user interfaces. For additional details, visit the [Baklava Design System website](https://baklava.design).
## Masking Libraries
### Maskito Input Masking Library
Maskito is an input masking library that simplifies adding input masks to web applications, enhancing user experience by guiding data entry in specified formats. Learn more about Maskito [here](https://maskito.dev/getting-started/what-is-maskito).
### IMask
IMask is another flexible masking library that provides a diverse range of options for data input formatting and validation. Further information on IMask can be found [here](https://imask.js.org/).
## Getting Started
To begin working with this showcase project, follow the steps below to clone the repository and set up the environment:
```bash
# Clone the repository
git clone https://github.com/doganozturk/baklava-input-mask-react-examples.git
# Navigate to the project directory
cd baklava-input-mask-react-examples
# Install the dependencies
npm install
# Launch the development server
npm run dev
```
## Future Directions
This project may incorporate additional masking libraries or other relevant technologies as part of future expansions to demonstrate broader utility with the Baklava Design System.
## Author
- **Doğan Öztürk** - View on [Github](https://github.com/doganozturk)