Frontend Toolbox Save
Frontend tools which we used in snappmarket v2
Project README
⚙ SnappMarket frontend powerful tools
hooks, helpers, ui components and icons that we used in new version of snappmarket website
demo
You can see demo at : https://ft-box.netlify.com/
get started
npm i @snappmarket/ui
npm i @snappmarket/hooks
npm i @snappmarket/helpers
npm i @snappmarket/icons
npm i @snappmarket/config
// OR
yarn add @snappmarket/ui
yarn add @snappmarket/hooks
yarn add @snappmarket/helpers
yarn add @snappmarket/icons
yarn add @snappmarket/config
⚒ Hooks Found Here
| Hook Name | Description |
|---|---|
| useDebounce | 🔂 Change rapidly, do once |
| useDidUpdateEffect | 🧵 Do not worry about render phase effect calls |
| useFocus | 😵 Focus on every thing you want |
| useForceUpdate | 👿 force update component |
| useGeoLocation | 🗺 easily deal with navigator location API |
| useRouteChange | 🏹 detect when react router dom route changes |
| useTimer | ⏱ easily handle timing |
💈 UI Components found here
| Component | Description |
|---|---|
| Accordion | Accordion Ui component |
| Alert | Alert Ui component |
| Breadcrumb | Breadcrumb Ui component |
| Button | Button Ui component |
| Checkbox | CheckBox Ui component |
| ConfirmDialog | ConfirmDialog Ui component |
| Dialog | Dialog Ui component |
| Grid | Grid Ui component |
| GridSystem | GridSystem Ui component |
| Icon | Icon Ui component |
| Image | Image Ui component |
| Input | Input Ui component |
| InputRange | InputRange Ui component |
| Range | Range Ui component |
| Range | Range Ui component |
| Json | Json Ui component |
| Label | Label Ui component |
| LinedText | LinedText Ui component |
| Loading | Loading Ui component |
| Modal | Modal Ui component |
| OptionGroup | OptionGroup Ui component |
| Radio | Radio Ui component |
| Pagination | Pagination Ui component |
| ProgressBar | ProgressBar Ui component |
| Skeleton | Skeleton Ui component |
| Slider | Slider Ui component |
| TabSwitcher | TabSwitcher Ui component |
| TextWrap | TextWrap Ui component |
| Toggle | Toggle Ui component |
| Tooltip | Tooltip Ui component |
💊 Helpers Found Here
| Helper | Methods |
|---|---|
| ArrayHelpers | arrayItemAddProp ,flattenArray ,serializeObject ,stringifyArray ,deepFlatten |
| CookieHelpers | getCookie, setCookie |
| DebugHelpers | delog, ApiError, globalErrorCatcher |
| HttpHelpers | fetchWithTimeOut, universalCall |
| JsonHelpers | recursiveJsonParse |
| MapHelpers | isLocationInIran |
| NumberHelpers | persianNumber, englishNumber, generateKey, cellphoneValidate, cellphoneValidatePattern, currencyPrice |
| ObjectHelpers | removeByKey, flattenObject, makeCookieString, safeObjectPropertyRead, getNextProp |
| OSHelpers | getOSName, getAgent |
| PromiseHelpers | racePromise, makeTimeout, emptyPromise |
| ProxyHelpers | onChangeReflector |
| ReduxHelpers | actionMaker, normalizeActionType, configPersistor |
| StorageHelpers | getLocalStorageData |
| StringHelpers | stringReplace, bulkStringReplace |
| TemplateHelpers | HexToRgb, defineForegroundColor, makeRgba, decideMeasurement, makeShadow |
| WindowHelpers | getPathName, getWindowSize |
💎 Icons found here
All icons has svg file, react component, and an special sprite svg
- 💯 100% tested react 100+ svg icon components
Contributors ✨
Thanks goes to these wonderful people (emoji key):
 Jafar Rezaei 🚇 ⚠️ 📖 💻 🤔 🚧 📦 👀 |
 Reza Erami 🚇 ⚠️ 📖 💻 |
 mahsa mesbah ⚠️ 📖 💻 |
 Mostafa Rastegar 🤔 ⚠️ 💻 |
This project follows the all-contributors specification. Contributions of any kind welcome!
Open Source Agenda is not affiliated with "Frontend Toolbox" Project. README Source: snappmarket/frontend-toolbox
Stars
37
Open Issues
17
Last Commit
1 year ago
Repository
License
Homepage
Open Source Agenda Badge
