Giter Club home page Giter Club logo

saffroncodejs's Introduction

Saffron React

Package of graphical and non graphical libraries for React developers such as Canvas preloader and Regex functions.

(Support us with your stars on Github )

npm install saffroncodejs

ui

import {ui} from 'saffroncodejs'

Preloader

1- Set the Preloader color,size and animation speed once in index.js ui.Preloader.setUp("#777777ff",200,200,0.2)
2- and then use it every where like below: <ui.Preloader/> โ˜บ



Input

This is just like html input tag but it has better control on patterns and it will correct the user's mismatches character



TagForInput

this component displayes a tag name on top corner of the input element passed to it (as a child component)
**the element can be an input, a textArea or a select input
**supports rtl and ltr direction
to use inside a react app:

<ui.TagForInput tagName="title">
  <input />
</ui.TagForInput>

example


example


example


example


Properties:

rtl : boolean ---> whether the tagName should be on left corner or right -- default is false
tagName: string ---> the tag title
tagBackGround: string ---> the background color of the tag span -- default is white
tagColor: string ---> tagName color -- default is black



ItemSlider


this component is a slider for the cards (or divs with your own design) you pass to it.

DEMO
to use inside a react app:

<ui.ItemsSlider rtl id="slider1">
 <div className="item"></div>
 <div className="item"></div>
 <div className="item"></div>
 <div className="item"></div>
</ui.ItemsSlider>


***Notice that the divs you pass to this component, should have a class and the class can be named and styled as you wish***

Properties:
id : string ---> this is the identifier that enables navigation button scrolling
rtl : boolean ---> whether the tagName should be on left corner or right -- default is false
color : string ---> color for the navigation buttons -- default is black
fontSize: string ---> font size of the navigation buttons -- default is 20px
top: string ---> the position of the navigation buttons from top of the container
noNavButtons: boolean ---> display or don't display Navigation Buttons -- default is false(display)

libs

Pure JS functions and classes
import {libs} from 'saffroncodejs'

StringFunctions

Full list of libs.StringFunctions functions:

clearDoubleQuartmarksOnJSON(str:string=""):string
clearHTMLTags(ReferText:string=""):string
clearSpacesAndTabs(str:string=""):string
clearSpacesAndTabsAndArrows(str:string="")
compairFarsiString(str1:string="",str2:string=""):number
correctInputString(str:string=""):string
correctUTF(utfWord:string=""):string
currancyPrint(inputcurencynumber:string):string
fileSizeInString(fileSizeInByte:number=0):string
findMainDomain(url:string="",removeHTTPPart:boolean=true):string
findPortOfURL(url:string=""):number
generateLinks(str:string="",linkColors:number=-1):string
htmlCharacterEncoder(str:string=""):string
isArabic(str:string=""):boolean
isEmail(email:string=""):boolean
isLocation(str:string=""):boolean
isNullOrEmpty(value:string):boolean
isPersian(str:string="",stringLength:number=NaN):boolean
isURL(str:string=""):boolean
jsonCorrector(oldJson:string=""):string
KaafYe(str:string=""):string
makeHTMLWithSize(pureHML:string="", defaultFontSize:number=0):string
numCorrection(str:string=""):string
numToString(num:number,numberLenght:number=2):string
removeHTML(ReferText:string=""):string
removeNumberFromBegining(str:string=""):string
removeSpacesFromTwoSides(str:string=""):string
returnLasNumberPartInInteger(str:string=""):number
search(str:string="",searchedWord:string="",fineAll:boolean = true,arabic:boolean=false, arabic2:boolean=false)
short(str:string="",len:number=10,removeEntersWith:string='')
stringToColor(str:string=""):number
timeInString(seconds:number=0):string
utfToUnicode(utfString:string=""):string

framework

import {framework} from 'saffroncodejs'

EventDispatcher

var dispatcher = new EventDispatcher();

//How to add and remove an EventListner on an dispatcher

dispatcher.addEventListner(type:string,trigger:(eventType?:string,param?:any)=>any):void;

//sample : dispatcher.addEventListner("LOGGED_IN",this.userIsLoggedIn)

dispatcher.removeEventListner(type:string,trigger:(eventType?:string,param?:any)=>any):void;

//sample : dispatcher.removeEventListner("LOGGED_IN",this.userIsLoggedIn)

//How to dispatch an event on your dispatcher

dispatcher.dispatchEvent(type:string,param:any=null):void;

//sample : dispatcher.dispatchEvent("LOGGED_IN",userTocken)

PageManager(ReactRouter's Assist)

dispatcher:new EventDispatcher()

PAGE_CHANGED : "PAGE_CHANGED"

routerParamList:''

changePage:changePage

decodePageParams:decodePageParams

getCurrentPage:getCurrentPage

registerPage:registerPage

PageData

url:string;

pageName:string;

component?:React.ComponentClass;

pageData:any;

saffroncodejs's People

Contributors

alirezafarin avatar dependabot[bot] avatar mesepehr avatar siamakjalil avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.