naxui-manager

naxui-manager

The 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.

The naxui-manager is using the naxcss library. which is very light and strong css library.

Table of Contents

• Quick Start Create Component
  • Tag
  • Creare First Component
  • useProps
  • useInterafce
  • useVariants
  • Props List
  • Aliases
• Theme
  • ThemeProvider
  • createTheme
  • useTheme
  • changeTheme
  • modifyTheme
  • mergeTheme
  • Default Theme Option
  • SX Prop
  • CSS Value
  • Use Gradient
  • css_option
  • alpha
• Hooks
  • useMediaScreen
  • useAnimation
  • useTransiton
  • useTransitons
  • useWindowResize
  • useWindow
• CSS - Learn the naxcss
• Server Side Rendering
• Typescript

Quick Start

Install the package using npm or yarn in your project directory.

npm install naxui-manager
or
yarn add naxui-manager

Tag

this is the base component you can use it to create custom component.

import { Tag } from 'naxui-manager'

const App = () => {
  return <Tag
    component="div"
    baseClass="my-comp" 
    classNames={["a", "b"]} // see naxcss classNames funcion
    sx={} // css style sheet
    typography="h1" // theme typography name
    hover={} // css style for hover effect
    spacing={} // children spacing (number | breackpoin)
    // you can also pass all the css property as attribute
  > My UI Library</Tag>
}

Create First Component

Here is the example to create your custom Button component

import * as React from 'react';
import {Tag, TagProps, TagComponentType } from 'naxui-manager';

export type ButtonProps<T extends TagComponentType = 'button'> = TagProps<T> & {
    // Additional props specific to the Button component can be defined here
};

const Button = <T extends TagComponentType = "button">({ children, ...rest }: ButtonProps<T>, ref: React.Ref<any>) => {
    return (
        <Tag
            component="button"
            border={0}
            minWidth={100}
            height={40}
            radius={1.5}
            cursor="pointer"
            typography="button"
            {...rest}
            hover={{
                bgcolor: alpha("brand", 1.2),
            }}
            sx={{
                transition: "background .3s",
            }}
            ref={ref}
        >
            {children}
        </Tag>
    )
}
export default React.forwardRef(Button) as typeof Button

useProps

the useProps function is except an object where you can pass css aliases and all others css attributes and also your component props. This function already used in Tag component.

import {useProps} from 'naxui-manager'

const Child = (props) => {
  const {isShow, ...rest} = useProps(props)
  return (
    <div {...rest}>
      {isShow && <div>wellcome</div>}
    </div>
  )
}


const App = () => {
  return  (
    <div>
      <Child 
        isShow={true}
        bgcolor="red"
        padding={2}
        margin={3}
      />
    </div>
  )
}

useInterafce

you can use theme interfacesin a component. give name and default props and user props.

import {useInterface} from 'naxui-manager'

const Button = (props) => {
  const defaultProps = {
    color: "primary",
    variant: "filled"
  }
  const newProps = useInterface("Button", defaultProps, props)
}

Props List

you can import the typescript type CSSPropAsAttr from naxui-manager to see what kind aliases and css props you can use as a component attribute.

Aliases

In 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. If you don't know how to create an alias then you can learn about the naxcss

Name	Description
bgcolor	background-color, you can pass string or theme colors name example: primary, primary.color
bgimage	background-image
bg	background
p	padding
pt	paddng-top
pr	padding-right
pb	padding-bottom
pl	padding-left
px	paddingleft and padding-right
py	padding-top and padding-bottom
m	margin
mt	margin-top
mr	margin-right
mb	margin-bottom
ml	margin-left
mx	margin-left and margin-right
my	margin-top and margin-bottom
radius	border-radius, if you pass a number then it will multiply with 8
shadow	box-shadow, you can pass number, string or theme shadows, example: 1, 2
border	border
w	width
h	height
maxw	max-width
minw	min-width
maxh	max-height
minh	min-height
flexBox	display: flex
flexRow	flex-direction: row
flexColumn	flex-direction: column
flexWraped	flex-wrap: wrap

ThemeProvider

The 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.

import {ThemeProvider} from 'naxui-manager'

const App = () => {
  return (
    <ThemeProvider theme="light" resetCss>
      <div>Hello<div>
    </ThemeProvider>
  )
}

createTheme

With this function you can create your own theme. You can pass name and some theme option props. The props will merge with default theme.

import {createTheme} from 'naxui-manager'

createTheme("my-theme", {...themeOption})

useTheme and getTheme

You 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.

import {useTheme, getTheme} from 'naxui-manager'

const theme = useTheme()

changeTheme

You can change the theme by calling this function. you have to pass the theme name which you want to change.

import {changeTheme} from 'naxui-manager'

changeTheme("my-theme")

modifyTheme

Sometime 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.

import {modifyTheme} from 'naxui-manager'

modifyTheme("default", {
  colors: {
    primary: {
      color: "red",
      text: "#fff"
    }
  }
})

mergeTheme

This is a optional function. If you need then you can use this function to merge two theme

import {mergeTheme} from 'naxui-manager'

mergeTheme(theme1, theme2)

Default Theme Option

{

name

theme name string, the default the name is default and the default dark theme name is default-dark

  name: "my-theme"

breakpoints

breakpoints: {
  xs: 0,
  sm: 600,
  md: 900,
  lg: 1200,
  xl: 1536
}

globalStyle

If you are add some css in globalStyle and that will load at the header globally.

Example

  globalStyle: {
    body: {
      p: 0,
      m: 0        
    }
  }

colors

In the theme already has some predefine color pallate. here is the list.

  colors: {
    paper: "#f3f3f3",
    primary: "#2563eb",
    secondary: "#0d9488",
    success: "#16a34a",
    error: "#dc2626",
    warning: {
      color: "#d97706",
      text: '#ffffff',
    }
  }

typography

Theme typography option. in the scale you can set the typography scale.

typography: {
  fontFamily: '"Inter","Helvetica","Arial",sans-serif',
  h1: {
    fontFamily: 'typography.font-family',
    fontSize: 'fontsize.h1',
    color: "color.text"
  },
  h2: {
    fontFamily: 'typography.font-family',
    fontSize: 'fontsize.h2',
    color: "color.text"
  },
  h3: {
    fontFamily: 'typography.font-family',
    fontSize: 'fontsize.h3',
    color: "color.text"
  },
  h4: {
    fontFamily: 'typography.font-family',
    fontSize: 'fontsize.h4',
    color: "color.text"
  },
  h5: {
    fontFamily: 'typography.font-family',
    fontSize: 'fontsize.h5',
    color: "color.text"
  },
  h6: {
    fontFamily: 'typography.font-family',
    fontSize: 'fontsize.h6',
    color: "color.text"
  },
  text: {
    fontFamily: 'typography.font-family',
    fontSize: 'fontsize.text',
    fontWeight: 400,
    color: "color.text"
  },
  subtext: {
    fontFamily: 'typography.font-family',
    fontSize: 'fontsize.text',
    fontWeight: 400,
    color: "color.subtext"
  },
  button: {
    fontFamily: 'typography.font-family',
    fontSize: 'fontsize.button',
    fontWeight: 500,
    textTransform: "uppercase",
  }
}

shadow

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

shadow: (number) => string

interfaces

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()

interfaces: {
  // Example
  Button: (userProps) => {
    return {
      ...
    }
  }
},

}

SX Prop

The sx prop is a shortcut for defining custom styles.

<MyComp 
  sx={{ 
    bgcolor:"red",

    // use theme prop
    bgcolor:"brand",

    // responsive
    bgcolor: {
      sm: "red",
      md: (theme) => theme.colors.primary.color,
    },

    // function
    bgcolor: (theme) => theme.colors.error.color
  }} 
/>

CSS Value

There 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.

Example

<MyComp 
  bgcolor="red"
  
  // use theme prop
  bgcolor="brand"

  // responsive
  bgcolor={{
    sm: "red",
    md: (theme) => theme.colors.primary.color
  }}

  // function
  bgcolor={(theme) => theme.colors.error.color}
/>

Here 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.

Use Gradient

How you can use the gradient color. you can use the geadient in background and text color

<MyComp 
  // use theme color props
  bgcolor="linear(90deg, primary, color.secondary)"
  // use rgb or hex
  bgcolor="linear(90deg, rgb(255, 0, 0), color.secondary  20%)"

  // text color
  color="redial(90deg, primary, color.secondary)"
  // use rgb or hex
  color="redial(90deg, rgb(255, 0, 0), color.secondary  20%)"
/>

css_option

this is a function where the customized the naxcss option. If you need it you can use it.

alpha

customize 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.

import {alpha} from 'naxui-manager'

<Tag 
  bgcolor={alpha("#ff3344", .3)}
/>

useMediaScreen

this hook help you to responsive.

import {useMediaScreen} from 'naxui-manager'

const screen = useMediaScree()
screen.is("xs" | "sm" | "md" | "lg" | "xl" | number)
screen.isDown("xs" | "sm" | "md" | "lg" | "xl" | number)
screen.isUp("xs" | "sm" | "md" | "lg" | "xl" | number)

useAnimation

you can create attractive animation with css keyframes

import {useAnimation} from 'naxui-manager'

const classname = useAnimation({
  from: {},
  to: {},
  delay: 0,
  duration: 600,
  ease: "ease" | "easeIn" | "easeOut" | "easeInOut" | "linear" | "bouncEaseIn" | "bounceEaseOut", 
  onStart: () => {},
  onFinish: () => {}
})

useTransiton

create css transition

import {useTransiton} from 'naxui-manager'

const [ref, classname] = useTransiton({
  initial: {},
  from: {},
  to: {},
  delay: 0,
  duration: 600,
  ease: "cubic-bezier(0.25, 0.1, 0.25, 1)", // optional
  easing: "easeInOut"| "easeOut"| "easeIn"| "sharp"| "linear"| "bounceEaseOut", 
  onStart: () => {},
  onFinish: () => {}
})

useTransitons

You can use with some predefined transitions. you can use them with this function.

import {useTransitons} from 'naxui-manager'

let type = "fade" //or "fadeDown" | "fadeUp" | "fadeRight" | "fadeLeft" | "zoom" | "zoomOver" | "collapsVerticle" | "collapsHorizental"
// or
let type = (transitionBoxInfo) => {
  return {
    in: {
      from: {},
      to: {}
    },
    out: {
      from: {},
      to: {}
    }
  }
}
let In = true
const [ref, classname] = useTransitons(type, In, {
  delay: 0,
  duration: 600,
  ease: "ease" | "easeIn" | "easeOut" | "easeInOut" | "linear" | "bouncEaseIn" | "bounceEaseOut", 
  onStart: () => {},
  onFinish: () => {}
})

useWindowResize

this hook expect a callback and when the screen is resizing at that time the callback will firing.

import {useWindowResize} from 'naxui-manager'
useWindowResize(() => {
  ...
})

isWindow

this hook will help to get the window. so you can work with server side and client side.

import {isWindow} from 'naxui-manager'

const win = isWindow()
if(win){
  // then  do something
}

css

You can learn the naxcss. and you must need to import them from naxui-manager

import {css, keyframes, alpha} from 'naxui-manager'

Server Side Rendering

You can learn the naxcss 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.

import {serverStyleTags} from 'naxui-manager'

const styles = serverStyleTags()

Typescript

You can directly import typescript types from the library.