react-ui-components-superflows

UI kit for the Superflows design language

Demo

Note

This package is under active development. Expect frequent updates.

Install

npm install --save react-ui-components-superflows

Then install the dependencies.

Dependencies

npm install --save bootstrap
npm install --save react-bootstrap
npm install --save react-bootstrap-icons

Available UI Components

All the components are responsive built in. Usage and customization options shown below.

AlertError

Alert component used to show an error message

import React from 'react'
import 'bootstrap/dist/css/bootstrap.min.css';
import { AlertError } from 'react-ui-components-superflows'

const App = () => {

  return (
    <div>
      {/* Simple usage */}
      <AlertError caption="Duplications not allowed" />

      {/* Advanced usage */}
      <AlertError caption="Duplications not allowed" custom={{backgroundColor:"#F4CFCA", color:"#000000", borderColor:"#000000"}}/>
    </div>
  )

}

export default App

AlertSuccess

Alert component used to show a success message

import React from 'react'
import 'bootstrap/dist/css/bootstrap.min.css';
import { AlertSuccess } from 'react-ui-components-superflows'

const App = () => {

  return (
    <div>
      {/* Simple usage */}
      <AlertSuccess caption="Operation successful!" />

      {/* Advanced usage */}
      <AlertSuccess caption="Duplications not allowed" custom={{backgroundColor:"#D7ECDE", color:"#99A89E", borderColor:"#99A89E"}}/>
    </div>
  )

}

export default App

ButtonNext

Button component, which is designed for navigating to the next screen after click

import React from 'react'
import 'bootstrap/dist/css/bootstrap.min.css';
import { ButtonNext } from 'react-ui-components-superflows'

const App = () => {

  const [otp, setOtp] = useState('')

  function onClick() {
    // code after clicking
  }

  return (
    <div>
      {/* Simple usage */}
      <ButtonNext 
        caption="Verify" 
        disabled={otp.length === 0} 
        onClick={onClick} />

      {/* Advanced usage */}
      <ButtonNext 
        caption="Verify" 
        disabled={otp.length === 0} 
        onClick={onClick}
        icon="ArrowRight"
        custom={{backgroundColor:"#F4CFCA", color:"#000000"}} />
    </div>
  )

}

export default App

ButtonCancel

Button component, which is designed as a button to cancel any activity

import React from 'react'
import 'bootstrap/dist/css/bootstrap.min.css';
import { ButtonCancel } from 'react-ui-components-superflows'

const App = () => {

  function onClick() {
    // code after clicking
  }

  return (
    <div>
      {/* Simple usage */}
      <ButtonCancel
        caption="Cancel" 
        disabled={false} 
        onClick={onClick} />

      {/* Advanced usage */}
      <ButtonCancel 
        caption="Cancel" 
        disabled={false} 
        onClick={onClick}
        icon="ArrowRight"
        custom={{backgroundColor:"#F4CFCA", color:"#000000"}} />
    </div>
  )

}

export default App

ButtonNeutral

Button component, which is designed as a neutral component and can be used for any purpose

import React from 'react'
import 'bootstrap/dist/css/bootstrap.min.css';
import { ButtonNeutral } from 'react-ui-components-superflows'

const App = () => {

  function onClick() {
    // code after clicking
  }

  return (
    <div>
      {/* Simple usage */}
      <ButtonNeutral
        caption="Update" 
        disabled={false} 
        onClick={onClick} />

      {/* Advanced usage */}
      <ButtonNeutral 
        caption="Update" 
        disabled={false} 
        onClick={onClick}
        icon="Save"
        custom={{backgroundColor:"#F4CFCA", color:"#000000"}} />
    </div>
  )

}

export default App

ButtonTimer

Button component, which is initially disabled, enables after a specified time. After onClick, it again disabled and enables after the same time specified in second by duration.

import React from 'react'
import 'bootstrap/dist/css/bootstrap.min.css';
import { ButtonTimer } from 'react-ui-components-superflows'

const App = () => {

  const [otp, setOtp] = useState('')

  function onResend() {
    // code after clicking
  }

  return (
    <div>

      {/* Simple usage */}
      <ButtonTimer 
        timer={30} 
        captionBefore="Resend OTP in " 
        captionAfter="Resend OTP" 
        onClick={onResend()}/>

      {/* Advanced usage */}
      <ButtonTimer 
        timer={30} 
        captionBefore="Resend OTP in " 
        captionAfter="Resend OTP" 
        onClick={onResend()}
        custom={{backgroundColor:"#efefef", color:"#000000"}}/>
      
    </div>
  )

}

export default App

Footnote

Footnote, useful for displaying version or copyright info

import React from 'react'
import 'bootstrap/dist/css/bootstrap.min.css';
import { Footnote } from 'react-ui-components-superflows'

const App = () => {

  return (
    <div>
      {/* Simple Usage */}
      <Footnote caption="Version 3.12" />

      {/* Advanced Usage */}
      <Footnote caption="Version 3.12" custom={{color: "red"}}/>
    </div>
  )

}

export default App

InfoBlock

Block of information, which the user should not miss

import React from 'react'
import 'bootstrap/dist/css/bootstrap.min.css';
import { InfoBlock } from 'react-ui-components-superflows'

const App = () => {

  return (
    <div>
      {/* Simple Usage */}
      <InfoBlock caption="OTP has been emailed to [email protected]" />

      {/* Advanced Usage */}
      <InfoBlock caption="OTP has been emailed to [email protected]"  custom={{backgroundColor:"#F4CFCA", color:"#000000", borderColor:"#000000"}}/>
    </div>
  )

}

export default App

InputEmail

Email input, with in built validation, enter press handling and autofocus.

import React from 'react'
import 'bootstrap/dist/css/bootstrap.min.css';
import { InputEmail } from 'react-ui-components-superflows'

const App = () => {

  const [email, setEmail] = useState('');

  function onEnterEmail() {
    // code after on enter pressed
  }

  return (
    <div>
      <InputEmail 
        setValue={setEmail} 
        autofocus={true} 
        onEnterPressed={() => {onEnterEmail()}}/>
    </div>
  )

}

export default App

InputName

Email input, with in built validation, enter press handling and autofocus.

import React from 'react'
import 'bootstrap/dist/css/bootstrap.min.css';
import { InputName } from 'react-ui-components-superflows'

const App = () => {

  const [name, setName] = useState('');

  function onEnterName() {
    // code after on enter pressed
  }

  return (
    <div>
      <InputName 
        setValue={setName} 
        autofocus={true} 
        onEnterPressed={() => {onEnterName()}}/>
    </div>
  )

}

export default App

InputSearch

Search input, with in built validation, enter press handling and autofocus.

import React from 'react'
import 'bootstrap/dist/css/bootstrap.min.css';
import { InputSearch } from 'react-ui-components-superflows'

const App = () => {

  const [searchString, setSearchString] = useState('');

  function onEnterSearch() {
    // code after on enter pressed
  }

  return (
    <div>
      <InputSearch 
        setValue={setSearchString} 
        autofocus={true} 
        onEnterPressed={() => {onEnterSearch()}}/>
    </div>
  )

}

export default App

InputDob

Email input, with in built validation, enter press handling and autofocus.

import React from 'react'
import 'bootstrap/dist/css/bootstrap.min.css';
import { InputDob } from 'react-ui-components-superflows'

const App = () => {

  const [dob, setDob] = useState('');

  function onEnterDob() {
    // code after on enter pressed
  }

  return (
    <div>
      <InputDob 
        setValue={setDob} 
        autofocus={true} 
        onEnterPressed={() => {onEnterDob()}}/>
    </div>
  )

}

export default App

InputGender

Gender input, with in built in switch.

import React from 'react'
import 'bootstrap/dist/css/bootstrap.min.css';
import { InputGender } from 'react-ui-components-superflows'

const App = () => {

  const [gender, setGender] = useState(0);

  function onChangeGender(value) {
    setGender(value)
  }

  return (
    <div>
      <InputDob 
        onChange={onChangeGender}
        selectedValue={1} />
    </div>
  )

}

export default App

InputOTP

OTP input, with in built validation, enter press handling and autofocus.

import React from 'react'
import 'bootstrap/dist/css/bootstrap.min.css';
import { InputEmail } from 'react-ui-components-superflows'

const App = () => {

  const [otp, setOtp] = useState('');

  function onEnterOtp() {
    // code after on enter pressed
  }

  return (
    <div>
      <InputOtp 
        setValue={setOtp} 
        autofocus={true} 
        onEnterPressed={() => {onEnterOtp()}}/>
    </div>
  )

}

export default App

LogoMast

Component that shows an image like a mast head, typically used to display a logo in the login and registration flows.

import React from 'react'
import 'bootstrap/dist/css/bootstrap.min.css';
import { LogoMast } from 'react-ui-components-superflows'

const App = () => {

  return (
    <div>
      <LogoMast 
        imageUrl="https://**************.png" 
        imageAlt="This is a test image" />
    </div>
  )

}

export default App

VSpace

A vertical spacing block

import React from 'react'
import 'bootstrap/dist/css/bootstrap.min.css';
import { VSpace } from 'react-ui-components-superflows'

const App = () => {

  return (
    <div>
      <VSpace />
    </div>
  )

}

export default App

License

MIT © superflows-dev