{"id":24511718,"url":"https://github.com/devnax/naxui-manager","last_synced_at":"2025-03-15T09:44:24.558Z","repository":{"id":179706368,"uuid":"664004844","full_name":"devnax/naxui-manager","owner":"devnax","description":null,"archived":false,"fork":false,"pushed_at":"2025-01-06T14:35:00.000Z","size":1058,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-22T00:41:19.850Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/devnax.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-07-08T16:55:51.000Z","updated_at":"2025-01-06T14:35:03.000Z","dependencies_parsed_at":"2024-08-11T20:05:53.953Z","dependency_job_id":"cf4c7072-d841-4e3d-b763-2329b82d92e9","html_url":"https://github.com/devnax/naxui-manager","commit_stats":null,"previous_names":["devnax/naxui-manager"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devnax%2Fnaxui-manager","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devnax%2Fnaxui-manager/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devnax%2Fnaxui-manager/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devnax%2Fnaxui-manager/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/devnax","download_url":"https://codeload.github.com/devnax/naxui-manager/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243713387,"owners_count":20335566,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-01-22T00:40:55.119Z","updated_at":"2025-03-15T09:44:24.535Z","avatar_url":"https://github.com/devnax.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# naxui-manager\n\nThe [naxui-manager](https://www.npmjs.com/package/naxui-manager) is an innovative React library that revolutionizes the process of creating custom UI library. developers gain the freedom to define their own UI library from scratch, tailoring it to meet their specific project requirements. The process of creating a custom UI library becomes an enjoyable and efficient experience. \n\nThe [naxui-manager](https://www.npmjs.com/package/naxui-manager) is using the [naxcss](https://www.npmjs.com/package/naxcss) library. which is very light and strong css library. \n\n## Table of Contents\n\n- [Quick Start](#quick-start)\nCreate Component\n  - [Tag](#tag)\n  - [Creare First Component](#create-first-component)\n  - [useProps](#useprops)\n  - [useInterafce](#useinterface)\n  - [useVariants](#usevariants)\n  - [Props List](#props-list)\n  - [Aliases](#aliases)\n- Theme\n  - [ThemeProvider](#themeprovider)\n  - [createTheme](#createtheme)\n  - [useTheme](#usetheme)\n  - [changeTheme](#changetheme)\n  - [modifyTheme](#modifytheme)\n  - [mergeTheme](#mergetheme)\n  - [Default Theme Option](#default-theme-option)\n  - [SX Prop](#sx-prop)\n  - [CSS Value](#css-value)\n  - [Use Gradient](#use-gradient)\n  - [css_option](#css_option)\n  - [alpha](#alpha)\n- Hooks\n  - [useMediaScreen](#usemediascreen)\n  - [useAnimation](#useanimation)\n  - [useTransiton](#usetransiton)\n  - [useTransitons](#usetransitons)\n  - [useWindowResize](#usewindowresize)\n  - [useWindow](#usewindow)\n- [CSS](#css) - Learn the [naxcss](https://www.npmjs.com/package/naxcss)\n- [Server Side Rendering](#server-side-rendering)\n- [Typescript](#typescript)\n\n## Quick Start\n\nInstall the package using npm or yarn in your project directory.\n\n```bash\nnpm install naxui-manager\nor\nyarn add naxui-manager\n```\n\n\n## Tag\nthis is the base component you can use it to [create custom component](#create-first-component). \n```tsx\nimport { Tag } from 'naxui-manager'\n\nconst App = () =\u003e {\n  return \u003cTag\n    component=\"div\"\n    baseClass=\"my-comp\" \n    classNames={[\"a\", \"b\"]} // see naxcss classNames funcion\n    sx={} // css style sheet\n    typography=\"h1\" // theme typography name\n    hover={} // css style for hover effect\n    spacing={} // children spacing (number | breackpoin)\n    // you can also pass all the css property as attribute\n  \u003e My UI Library\u003c/Tag\u003e\n}\n\n```\n\n\n\n## Create First Component\nHere is the example to create your custom `Button` component\n```tsx\nimport * as React from 'react';\nimport {Tag, TagProps, TagComponentType } from 'naxui-manager';\n\nexport type ButtonProps\u003cT extends TagComponentType = 'button'\u003e = TagProps\u003cT\u003e \u0026 {\n    // Additional props specific to the Button component can be defined here\n};\n\nconst Button = \u003cT extends TagComponentType = \"button\"\u003e({ children, ...rest }: ButtonProps\u003cT\u003e, ref: React.Ref\u003cany\u003e) =\u003e {\n    return (\n        \u003cTag\n            component=\"button\"\n            border={0}\n            minWidth={100}\n            height={40}\n            radius={1.5}\n            cursor=\"pointer\"\n            typography=\"button\"\n            {...rest}\n            hover={{\n                bgcolor: alpha(\"brand\", 1.2),\n            }}\n            sx={{\n                transition: \"background .3s\",\n            }}\n            ref={ref}\n        \u003e\n            {children}\n        \u003c/Tag\u003e\n    )\n}\nexport default React.forwardRef(Button) as typeof Button\n\n```\n\n\n## useProps\nthe `useProps` function is except an object where you can pass [css aliases](#aliases) and all others `css` attributes and also your component props. This function already used in `Tag` component.\n```tsx\nimport {useProps} from 'naxui-manager'\n\nconst Child = (props) =\u003e {\n  const {isShow, ...rest} = useProps(props)\n  return (\n    \u003cdiv {...rest}\u003e\n      {isShow \u0026\u0026 \u003cdiv\u003ewellcome\u003c/div\u003e}\n    \u003c/div\u003e\n  )\n}\n\n\nconst App = () =\u003e {\n  return  (\n    \u003cdiv\u003e\n      \u003cChild \n        isShow={true}\n        bgcolor=\"red\"\n        padding={2}\n        margin={3}\n      /\u003e\n    \u003c/div\u003e\n  )\n}\n```\n\n\n## useInterafce\nyou can use theme interfacesin a component. give name and default props and user props.\n\n```js\nimport {useInterface} from 'naxui-manager'\n\nconst Button = (props) =\u003e {\n  const defaultProps = {\n    color: \"primary\",\n    variant: \"filled\"\n  }\n  const newProps = useInterface(\"Button\", defaultProps, props)\n}\n```\n\n## Props List\nyou can import the typescript type `CSSPropAsAttr` from `naxui-manager` to see what kind aliases and css props you can use as a component attribute.\n\n\n## Aliases\nIn this library there are already included many css property aliases. If you want to use your more custom aliases then you can set `css_option` in [ThemeProvider](#themeprovider). If you don't know how to create an alias then you can learn about the [naxcss](https://www.npmjs.com/package/naxcss)\n\n| Name         | Description                                                                                      |\n| ------------ | ------------------------------------------------------------------------------------------------ |\n| `bgcolor`    | `background-color`, you can pass string or theme colors name example: `primary`, `primary.color` |\n| `bgimage`    | `background-image`                                                                               |\n| `bg`         | `background`                                                                                     |\n| `p`          | `padding`                                                                                        |\n| `pt`         | `paddng-top`                                                                                     |\n| `pr`         | `padding-right`                                                                                  |\n| `pb`         | `padding-bottom`                                                                                 |\n| `pl`         | `padding-left`                                                                                   |\n| `px`         | `paddingleft` and `padding-right`                                                                |\n| `py`         | `padding-top` and `padding-bottom`                                                               |\n| `m`          | `margin`                                                                                         |\n| `mt`         | `margin-top`                                                                                     |\n| `mr`         | `margin-right`                                                                                   |\n| `mb`         | `margin-bottom`                                                                                  |\n| `ml`         | `margin-left`                                                                                    |\n| `mx`         | `margin-left` and `margin-right`                                                                 |\n| `my`         | `margin-top` and `margin-bottom`                                                                 |\n| `radius`     | `border-radius`, if you pass a number then it will multiply with `8`                             |\n| `shadow`     | `box-shadow`, you can pass number, string or theme shadows, example: `1`, `2`                    |\n| `border`     | `border`                                                                                         |\n| `w`          | `width`                                                                                          |\n| `h`          | `height`                                                                                         |\n| `maxw`       | `max-width`                                                                                      |\n| `minw`       | `min-width`                                                                                      |\n| `maxh`       | `max-height`                                                                                     |\n| `minh`       | `min-height`                                                                                     |\n| `flexBox`    | `display: flex`                                                                                  |\n| `flexRow`    | `flex-direction: row`                                                                            |\n| `flexColumn` | `flex-direction: column`                                                                         |\n| `flexWraped` | `flex-wrap: wrap`                                                                                |\n\n\n\n## ThemeProvider\nThe `ThemeProvider` component to handle the theme. you must be call this at the root of the app. you can pass the `css_option` and `defaultFontFamily` in this component.\n\n```tsx\nimport {ThemeProvider} from 'naxui-manager'\n\nconst App = () =\u003e {\n  return (\n    \u003cThemeProvider theme=\"light\" resetCss\u003e\n      \u003cdiv\u003eHello\u003cdiv\u003e\n    \u003c/ThemeProvider\u003e\n  )\n}\n```\n\n\n\n## createTheme\nWith this function you can create your own theme. You can pass `name`  and some `theme option` props. The props will merge with default theme.\n\n```js\nimport {createTheme} from 'naxui-manager'\n\ncreateTheme(\"my-theme\", {...themeOption})\n\n```\n\n## useTheme and getTheme\nYou can read the theme in your component by using these function. If you are usign `useTheme`, If the theme is change then the component will re-render. but the `getTheme` will not do any thing. you just read the theme only.\n\n```js\nimport {useTheme, getTheme} from 'naxui-manager'\n\nconst theme = useTheme()\n\n```\n\n## changeTheme\nYou can change the theme by calling this function. you have to pass the theme name which you want to change.\n\n```js\nimport {changeTheme} from 'naxui-manager'\n\nchangeTheme(\"my-theme\")\n\n```\n\n\n## modifyTheme\nSometime you need to modify the existing theme then you can use this function. like you want to modidy the `default` theme primary color and others.\n\n```js\nimport {modifyTheme} from 'naxui-manager'\n\nmodifyTheme(\"default\", {\n  colors: {\n    primary: {\n      color: \"red\",\n      text: \"#fff\"\n    }\n  }\n})\n\n```\n\n## mergeTheme\nThis is a optional function. If you need then you can use this function to merge two theme\n\n```js\nimport {mergeTheme} from 'naxui-manager'\n\nmergeTheme(theme1, theme2)\n\n```\n\n## Default Theme Option\n\n\n{\n\u003cdetails\u003e\n  \u003csummary\u003ename\u003c/summary\u003e\n\n  theme name `string`, the default the name is `default` and the default dark theme name is `default-dark`\n  ```js\n    name: \"my-theme\"\n  ```\n\u003c/details\u003e\n\u003cdetails\u003e\n  \u003csummary\u003ebreakpoints\u003c/summary\u003e\n\n  ```js\n  breakpoints: {\n    xs: 0,\n    sm: 600,\n    md: 900,\n    lg: 1200,\n    xl: 1536\n  }\n  ```\n\u003c/details\u003e\n\u003cdetails\u003e\n  \u003csummary\u003eglobalStyle\u003c/summary\u003e\n\n  If you are add some css in `globalStyle` and that will load at the header globally.\n\n  ####  Example\n  ```js\n    globalStyle: {\n      body: {\n        p: 0,\n        m: 0        \n      }\n    }\n  ```\n\u003c/details\u003e\n\u003cdetails\u003e\n  \u003csummary\u003ecolors\u003c/summary\u003e\n\n  In the theme already has some predefine color pallate. here is the list.\n\n  ```js\n    colors: {\n      paper: \"#f3f3f3\",\n      primary: \"#2563eb\",\n      secondary: \"#0d9488\",\n      success: \"#16a34a\",\n      error: \"#dc2626\",\n      warning: {\n        color: \"#d97706\",\n        text: '#ffffff',\n      }\n    }\n  ```\n\u003c/details\u003e\n\u003cdetails\u003e\n  \u003csummary\u003etypography\u003c/summary\u003e\n\n  Theme typography option. in the `scale` you can set the typography scale.\n\n  ```js\n  typography: {\n    fontFamily: '\"Inter\",\"Helvetica\",\"Arial\",sans-serif',\n    h1: {\n      fontFamily: 'typography.font-family',\n      fontSize: 'fontsize.h1',\n      color: \"color.text\"\n    },\n    h2: {\n      fontFamily: 'typography.font-family',\n      fontSize: 'fontsize.h2',\n      color: \"color.text\"\n    },\n    h3: {\n      fontFamily: 'typography.font-family',\n      fontSize: 'fontsize.h3',\n      color: \"color.text\"\n    },\n    h4: {\n      fontFamily: 'typography.font-family',\n      fontSize: 'fontsize.h4',\n      color: \"color.text\"\n    },\n    h5: {\n      fontFamily: 'typography.font-family',\n      fontSize: 'fontsize.h5',\n      color: \"color.text\"\n    },\n    h6: {\n      fontFamily: 'typography.font-family',\n      fontSize: 'fontsize.h6',\n      color: \"color.text\"\n    },\n    text: {\n      fontFamily: 'typography.font-family',\n      fontSize: 'fontsize.text',\n      fontWeight: 400,\n      color: \"color.text\"\n    },\n    subtext: {\n      fontFamily: 'typography.font-family',\n      fontSize: 'fontsize.text',\n      fontWeight: 400,\n      color: \"color.subtext\"\n    },\n    button: {\n      fontFamily: 'typography.font-family',\n      fontSize: 'fontsize.button',\n      fontWeight: 500,\n      textTransform: \"uppercase\",\n    }\n  }\n  ```\n\u003c/details\u003e\n\u003cdetails\u003e\n  \u003csummary\u003eshadow\u003c/summary\u003e\n\n  Theme default shadow. shadow is a function which you can use to get a shadow. in the argument you just need pass a number then it will return a shadow string\n\n  ```js\n  shadow: (number) =\u003e string\n  ```\n\u003c/details\u003e\n\u003cdetails\u003e\n  \u003csummary\u003einterfaces\u003c/summary\u003e\n\n  Interface is just an object. You can set global props for a component. so when you are creating a component at that time you can use this props by `getTheme()`\n\n  ```js\n  interfaces: {\n    // Example\n    Button: (userProps) =\u003e {\n      return {\n        ...\n      }\n    }\n  },\n  ```\n\u003c/details\u003e\n}\n\n\n\n## SX Prop\nThe sx prop is a shortcut for defining custom styles.\n\n```tsx\n\u003cMyComp \n  sx={{ \n    bgcolor:\"red\",\n\n    // use theme prop\n    bgcolor:\"brand\",\n\n    // responsive\n    bgcolor: {\n      sm: \"red\",\n      md: (theme) =\u003e theme.colors.primary.color,\n    },\n\n    // function\n    bgcolor: (theme) =\u003e theme.colors.error.color\n  }} \n/\u003e\n\n```\n\n\n## CSS Value\nThere are many way to pass css value. `string`, `number`, `breakpoint` or `function`. in the `string` you can pass string value and also theme prop. with the `breakpoint` you can do responsive design. and the `function` you can read the theme and return the value.\n\n`Example`\n```jsx\n\u003cMyComp \n  bgcolor=\"red\"\n  \n  // use theme prop\n  bgcolor=\"brand\"\n\n  // responsive\n  bgcolor={{\n    sm: \"red\",\n    md: (theme) =\u003e theme.colors.primary.color\n  }}\n\n  // function\n  bgcolor={(theme) =\u003e theme.colors.error.color}\n/\u003e\n```\nHere you can see the value  is `brand` so it will automatically get the theme primary.color color. in this way you can use everything from theme. \n\n\n\n\n## Use Gradient\nHow you can use the `gradient color`. you can use the geadient in `background` and text `color`\n```jsx\n\u003cMyComp \n  // use theme color props\n  bgcolor=\"linear(90deg, primary, color.secondary)\"\n  // use rgb or hex\n  bgcolor=\"linear(90deg, rgb(255, 0, 0), color.secondary  20%)\"\n\n  // text color\n  color=\"redial(90deg, primary, color.secondary)\"\n  // use rgb or hex\n  color=\"redial(90deg, rgb(255, 0, 0), color.secondary  20%)\"\n/\u003e\n```\n\n\n\n## css_option\nthis is a function where the customized the `naxcss` option. If you need it you can use it.\n\n## alpha\ncustomize you color. first argument you can pass the color name or hex and the second arg you can pass `0-2` this number will present the color light to dark and `1` will present the same color which you pass in first arg.\n```tsx\nimport {alpha} from 'naxui-manager'\n\n\u003cTag \n  bgcolor={alpha(\"#ff3344\", .3)}\n/\u003e\n\n```\n\n## useMediaScreen\nthis hook help you to responsive.\n```ts\nimport {useMediaScreen} from 'naxui-manager'\n\nconst screen = useMediaScree()\nscreen.is(\"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | number)\nscreen.isDown(\"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | number)\nscreen.isUp(\"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | number)\n\n```\n\n\n## useAnimation\nyou can create attractive animation with css `keyframes`\n```ts\nimport {useAnimation} from 'naxui-manager'\n\nconst classname = useAnimation({\n  from: {},\n  to: {},\n  delay: 0,\n  duration: 600,\n  ease: \"ease\" | \"easeIn\" | \"easeOut\" | \"easeInOut\" | \"linear\" | \"bouncEaseIn\" | \"bounceEaseOut\", \n  onStart: () =\u003e {},\n  onFinish: () =\u003e {}\n})\n\n```\n## useTransiton\ncreate css transition\n```ts\nimport {useTransiton} from 'naxui-manager'\n\nconst [ref, classname] = useTransiton({\n  initial: {},\n  from: {},\n  to: {},\n  delay: 0,\n  duration: 600,\n  ease: \"cubic-bezier(0.25, 0.1, 0.25, 1)\", // optional\n  easing: \"easeInOut\"| \"easeOut\"| \"easeIn\"| \"sharp\"| \"linear\"| \"bounceEaseOut\", \n  onStart: () =\u003e {},\n  onFinish: () =\u003e {}\n})\n```\n\n## useTransitons\nYou can use with some predefined transitions. you can use them with this function.\n```ts\nimport {useTransitons} from 'naxui-manager'\n\nlet type = \"fade\" //or \"fadeDown\" | \"fadeUp\" | \"fadeRight\" | \"fadeLeft\" | \"zoom\" | \"zoomOver\" | \"collapsVerticle\" | \"collapsHorizental\"\n// or\nlet type = (transitionBoxInfo) =\u003e {\n  return {\n    in: {\n      from: {},\n      to: {}\n    },\n    out: {\n      from: {},\n      to: {}\n    }\n  }\n}\nlet In = true\nconst [ref, classname] = useTransitons(type, In, {\n  delay: 0,\n  duration: 600,\n  ease: \"ease\" | \"easeIn\" | \"easeOut\" | \"easeInOut\" | \"linear\" | \"bouncEaseIn\" | \"bounceEaseOut\", \n  onStart: () =\u003e {},\n  onFinish: () =\u003e {}\n})\n```\n\n## useWindowResize\nthis hook expect a callback and when the screen is resizing at that time the callback will firing.\n```ts\nimport {useWindowResize} from 'naxui-manager'\nuseWindowResize(() =\u003e {\n  ...\n})\n```\n\n\n## isWindow\nthis hook will help to get the `window`. so you can work with server side and client side.\n```ts\nimport {isWindow} from 'naxui-manager'\n\nconst win = isWindow()\nif(win){\n  // then  do something\n}\n\n```\n\n## css\nYou can learn the [naxcss](https://www.npmjs.com/package/naxcss). and you must need to import them from `naxui-manager`\n\n```js\nimport {css, keyframes, alpha} from 'naxui-manager'\n\n```\n\n## Server Side Rendering\nYou can learn the [naxcss](https://www.npmjs.com/package/naxcss#server-side-rendering) for server side rendering or you can use a function `serverStyleTags` to render server-side style tags. If you are using the `nextjs` then you can call this in the `__document.ts` or `useServerInsertedHTML` registry.\n\n```js\nimport {serverStyleTags} from 'naxui-manager'\n\nconst styles = serverStyleTags()\n\n```\n\n## Typescript\nYou can directly import typescript types from the library. \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevnax%2Fnaxui-manager","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdevnax%2Fnaxui-manager","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevnax%2Fnaxui-manager/lists"}