UI kit for the Superflows design language
npm install react-ui-components-superflows> UI kit for the Superflows design language
 
This package is under active development. Expect frequent updates.
``bash`
npm install --save react-ui-components-superflows
Then install the dependencies.
`bash`
npm install --save bootstrap
npm install --save react-bootstrap
npm install --save react-bootstrap-icons
All the components are responsive built in. Usage and customization options shown below.
Alert component used to show an error message
`jsx
import React from 'react'
import 'bootstrap/dist/css/bootstrap.min.css';
import { AlertError } from 'react-ui-components-superflows'
const App = () => {
return (
{/ Advanced usage /}
}
export default App
`
Alert component used to show a success message
`jsx
import React from 'react'
import 'bootstrap/dist/css/bootstrap.min.css';
import { AlertSuccess } from 'react-ui-components-superflows'
const App = () => {
return (
{/ Advanced usage /}
}
export default App
`
Button component, which is designed for navigating to the next screen after click
`jsx
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 (
{/ Advanced usage /}
disabled={otp.length === 0}
onClick={onClick}
icon="ArrowRight"
custom={{backgroundColor:"#F4CFCA", color:"#000000"}} />
}
export default App
`
Button component, which is designed as a button to cancel any activity
`jsx
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 (
{/ Advanced usage /}
disabled={false}
onClick={onClick}
icon="ArrowRight"
custom={{backgroundColor:"#F4CFCA", color:"#000000"}} />
}
export default App
`
Button component, which is designed as a neutral component and can be used for any purpose
`jsx
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 (
{/ Advanced usage /}
disabled={false}
onClick={onClick}
icon="Save"
custom={{backgroundColor:"#F4CFCA", color:"#000000"}} />
}
export default App
`
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.
`jsx
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 (
{/ Simple usage /}
captionBefore="Resend OTP in "
captionAfter="Resend OTP"
onClick={onResend()}/>
{/ Advanced usage /}
captionBefore="Resend OTP in "
captionAfter="Resend OTP"
onClick={onResend()}
custom={{backgroundColor:"#efefef", color:"#000000"}}/>
}
export default App
`
Footnote, useful for displaying version or copyright info
`jsx
import React from 'react'
import 'bootstrap/dist/css/bootstrap.min.css';
import { Footnote } from 'react-ui-components-superflows'
const App = () => {
return (
{/ Advanced Usage /}
}
export default App
`
Block of information, which the user should not miss
`jsx
import React from 'react'
import 'bootstrap/dist/css/bootstrap.min.css';
import { InfoBlock } from 'react-ui-components-superflows'
const App = () => {
return (
{/ Advanced Usage /}
}
export default App
`
Email input, with in built validation, enter press handling and autofocus.
`jsx
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 (
}
export default App
`
Email input, with in built validation, enter press handling and autofocus.
`jsx
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 (
}
export default App
`
Search input, with in built validation, enter press handling and autofocus.
`jsx
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 (
}
export default App
`
Email input, with in built validation, enter press handling and autofocus.
`jsx
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 (
}
export default App
`
Gender input, with in built in switch.
`jsx
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 (
}
export default App
`
OTP input, with in built validation, enter press handling and autofocus.
`jsx
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 (
}
export default App
`
Component that shows an image like a mast head, typically used to display a logo in the login and registration flows.
`jsx
import React from 'react'
import 'bootstrap/dist/css/bootstrap.min.css';
import { LogoMast } from 'react-ui-components-superflows'
const App = () => {
return (
}
export default App
`
A vertical spacing block
`jsx
import React from 'react'
import 'bootstrap/dist/css/bootstrap.min.css';
import { VSpace } from 'react-ui-components-superflows'
const App = () => {
return (
}
export default App
``
MIT © superflows-dev