@ankjs/react-ui

📜 Introduction

A simple React UI Library

🖥️ Installation

    npm install @ankjs/react-ui
    or
    yarn add @ankjs/react-ui

[!NOTE] If you want to use all the features of the theme or apply it automatically All components, do this

Create Colors Object

📜 currently available on colors object 

primary,
primaryDeep,
primaryColor,
pageBg,
mainBgColor,
backgroundColor,
secondryBgColor,
color',
buttonBgActive,
buttonColorActive,
buttonBgDeactivate,
buttonColorDeactivate,
inputColorActive,
inputColorDeactivate,
inputBgActive,
inputBgDeactivate,

1. create a folder in 📂 src folder

       $ mkdir constants

2. 📂 constants in create object like this

       export const colors = {
         light : {
           primary : '# won color ' // brand color 
           backgroundColor : '# won color', // base background color 
           pageBg : '# won color ' // for all page PageView components 
           color : '# won color', //  text color 
         },
         dark:{
           // property same but value change 
           // important never use same value 
         },
         system:{
           // property same but value change 
           // important never use same value 
         }
       }
        

🔌 Theme Provider

  // App.js
  // React context like use
  import { AnkThemeProvider } from '@ankjs/react-ui';
  
  // if use  won colors object
  // import { colors } from './constants/colors.js';
  
  const App =  ()=>{
    
    return (
      <AnkThemeProvider
        // colorsObject={colors} if use 
      >
        ...
        
      </AnkThemeProvider>
    )
  }

••• Click to See More details >>>

🪟 Components

1. ThemeSwitchButton

2. PageView

3. Input

🪝 Hooks

1. useThemeColors

2. useLocalStorage

3. useWebDimensions

4. useElementDimensions

5. useScrollPosition

🌈 Contexts

1. AnkThemeContext

🎡 Core functions

1 getRandomUserId, 2. getRandomId, 3. getNumInRange, 4. getRandomText, 5. getRamdomKey 6. emailHideWithSymbol, 7. emailHide, 8. arrayToOneString 9. arrayFindBoolean 10. capatilcapitizeFirstLetter

See details

🔗 Links

👕 Go To Theme Switch Button

PLEASE HELP TO IMPROVE !!

THANKS FOR WATCHING 🙏

  |||||||||||||||||||_ ||||____|_____||||||||||
  ||||| ____  ___   / /__ /__  /, __ / ||||||||
  |||  / __ `/ __ \/ //_/   / /\_  \ ||||||||||
  ||| / /_/ / / / / ,<  ___/ /___/ / ||||||||||
  ||| \__,_/_/ /_/_/|_|/____/\__,_/  ||||||||||
  |||||||||||||||||||||||||||||||||||||||||||||