biokit

> ui component kit for bionet

![NPM](https://www.npmjs.com/package/biokit) ![JavaScript Style Guide](https://standardjs.com)

Clone project

bash

git clone https://github.com/TS22082/biokit.git

cd biokit

npm install





Work on project

bash

cd biokit

npm run



create new tab or new terminal window and navigate to root folder of project

bash

cd example

npm run





Install

bash

npm install --save biokit





Usage



This library assumes you have the latest bootstrap and mdi icons package imported through. The latest CDN links needed at the time of writing are:

html

jsx

import React, { Component } from 'react'

import {TextInput, Form, FormGroup, Card, Container, Row, Column} from 'biokit'



export default class App extends Component {

  constructor(props) {

    super(props);

    this.state = {

      name: '',

      email: '',

      pw: '',

      pw2: '',

    };

  }

  handleNameChange = e => {

    const name = e.target.value;

    this.setState({ name });

  };

  handlePwChange = e => {

    const pw = e.target.value;

    this.setState({ pw });

  };

  handlePw2Change = e => {

    const pw2 = e.target.value;

    this.setState({ pw2 });

  };

  handleEmailChange = e => {

    const email = e.target.value;

    this.setState({ email });

  };

  

  pwMatch = () => {

    if (this.state.pw === this.state.pw2){

      return true

    } else {

      return false

    }

  }



  validPw = (pw) => {

    var re = /^(?=.\d)(?=.[a-z])(?=.*[A-Z])\w{6,}$/;

    return re.test(pw)

  }



  render () {

    return (

              fluid={true}>

        

          

                          rounded={'0'}

              spacing={'mt-0'}

              icon={}

              title={'Sign In'}>

              

                

                                      inputTitle={'Username'}

                    type={'text'}

                    name={'name'}

                    placeholder={'Please enter text'}

                    handleChange={this.handleNameChange}

                    text={this.state.name}

                    theme={'light'}

                  />

                                      inputTitle={'Email'}

                    type={'email'}

                    name={'email'}

                    placeholder={'Please enter name'}

                    handleChange={this.handleEmailChange}

                    text={this.state.email}

                    theme={'light'}

                  />

                                      inputTitle={'Password'}

                    type={'password'}

                    name={'password'}

                    placeholder={'Please enter password'}

                    handleChange={this.handlePwChange}

                    text={this.state.pw}

                    theme={'light'}

                    trueWhen={this.validPw(this.state.pw)}

                    falseMessage={'Needed:  minimum six charectures: one number, one lowercase and one uppercase letter'}

                  />

                                      inputTitle={'Password'}

                    type={'password'}

                    name={'pw'}

                    placeholder={'Please repeat password'}

                    handleChange={this.handlePw2Change}

                    text={this.state.pw2}

                    theme={'light'}

                    trueWhen={this.pwMatch()}

                    falseMessage={'Does not match first password'}

                  />

                

              

            

          

          

                          rounded={'0'}

              spacing={'mt-0'}

              icon={}

              title={'example card with content'}>

              Inspirational quote

              Not every day is going to offer us a chance to save somebody's life, but every day offers us an opportunity to affect one.

              - Mark Bezos

biokit

> ui component kit for bionet

![NPM](https://www.npmjs.com/package/biokit) ![JavaScript Style Guide](https://standardjs.com)

Clone project

``bash git clone https://github.com/TS22082/biokit.git cd biokit npm install`Work on project`bash cd biokit npm run`create new tab or new terminal window and navigate to root folder of project`bash cd example npm run`Install`bash npm install --save biokit`Usage This library assumes you have the latest bootstrap and mdi icons package imported through. The latest CDN links needed at the time of writing are:`html``jsx import React, { Component } from 'react' import {TextInput, Form, FormGroup, Card, Container, Row, Column} from 'biokit' export default class App extends Component { constructor(props) { super(props); this.state = { name: '', email: '', pw: '', pw2: '', }; } handleNameChange = e => { const name = e.target.value; this.setState({ name }); }; handlePwChange = e => { const pw = e.target.value; this.setState({ pw }); }; handlePw2Change = e => { const pw2 = e.target.value; this.setState({ pw2 }); }; handleEmailChange = e => { const email = e.target.value; this.setState({ email }); }; pwMatch = () => { if (this.state.pw === this.state.pw2){ return true } else { return false } } validPw = (pw) => { var re = /^(?=.\d)(?=.[a-z])(?=.*[A-Z])\w{6,}$/; return re.test(pw) } render () { return ( fluid={true}> rounded={'0'} spacing={'mt-0'} icon={} title={'Sign In'}> inputTitle={'Username'} type={'text'} name={'name'} placeholder={'Please enter text'} handleChange={this.handleNameChange} text={this.state.name} theme={'light'} /> inputTitle={'Email'} type={'email'} name={'email'} placeholder={'Please enter name'} handleChange={this.handleEmailChange} text={this.state.email} theme={'light'} /> inputTitle={'Password'} type={'password'} name={'password'} placeholder={'Please enter password'} handleChange={this.handlePwChange} text={this.state.pw} theme={'light'} trueWhen={this.validPw(this.state.pw)} falseMessage={'Needed: minimum six charectures: one number, one lowercase and one uppercase letter'} /> inputTitle={'Password'} type={'password'} name={'pw'} placeholder={'Please repeat password'} handleChange={this.handlePw2Change} text={this.state.pw2} theme={'light'} trueWhen={this.pwMatch()} falseMessage={'Does not match first password'} /> rounded={'0'} spacing={'mt-0'} icon={} title={'example card with content'}> Inspirational quote Not every day is going to offer us a chance to save somebody's life, but every day offers us an opportunity to affect one. - Mark Bezos``

License

MIT © TS22082