react-png-button v1.0.4

React Plug-N'-Go Button

react-png-button is a highly customizable & scalable React Component that renders a collection a preset of production ready buttons. This component makes use of the useContext hook API to let the programmer add his or her own desired classes, on top of being able to globally modify all buttons in the application to suit your needs.

Install

npm install --save react-png-button

Showcase

Click here to see interactive full showcase

Features

1. A highly customizable, scalable, and production ready component.
2. Usage of the useContext hook API to offer maximum flexibility.

Context API

By using a Provider, the developer will gain access to extra functionalities, such as more options to globally or specifically customize each button. After setting up the Provider, the developer will have access to the context by accesing it with the useContext API. Below is a table of all the context methods:

Below is a code snippet that:

1. Applies the Provider component to the application.
2. Makes use of useContext to access the context object.
3. Usage of setGlobalClassName.
4. Usage of setCustomClassname.
5. Usage of setStyle.

index.js

import React from 'react'
import ReactDOM from 'react-dom'
import { Provider } from 'react-png-button'

import './index.css'
import App from './App'

ReactDOM.render(<Provider><App /></Provider>, document.getElementById('root'))

App.js

import React, { useContext, useEffect } from 'react'
// CSS
import classes from './App.module.css'
// JSX
import Button, { Context } from 'react-png-button'

const app = () => {
  const context = useContext(Context)

  const onClick = () => {
    context.setGlobalClassName(classes.Button)
  }

  useEffect(() => {
    context.setStyle({ width: '100%' })
    context.setCustomClassname('custom', classes.Custom)
  }, [])

  return (
    <Button button='primary' onClick={onClick}>Click me!</Button>
    <Button button='custom'>A custom button.</Button>
  )
}

export default app

Props

Basic Usage (Requires React.js v^16.8.0)

import React, { Component } from 'react'
import Button, { LogoButton } from 'react-png-button'

const component = () => {
    return (
    <Button button='primary'>
      React Plug-N'-Go Button
    </Button>
    <LogoButton button='facebook'>
      Sign up with Facebook type button
    </LogoButton>
  )
}

Global Button CSS Class

.Button {
  position: relative;
  outline: none;
  cursor: pointer;
  font: inherit;
  width: fit-content;
  user-select: none;
  border-width: 1px;
  border-style: solid;
  border-radius: 4px;
  line-height: 1.5;
  font-weight: 600;
  padding: 10px 16px;
  box-shadow: none;
  transition: background-color .1s ease-in-out, border-color .15s ease-in-out,box-shadow .15s ease-in-out, opacity ease 0.15s, transform ease 0.15s;
}

.Button:active {
  transform: scale(0.95);
}

License

MIT © rmolinamir