Neumorphkit. 🕳

Neumorphkit is a set of beautiful React components themed after Neumorphic design (Soft Ui) animated with react-spring.

Check out this DEMO. Demo repo repo.

The components are fairy-dusted with React-Spring making them look and feel even more... neumorphic.

The available components include.

• Neumorphic Binary
• Neumorphic Button
• Neumorphic Surface (Card)
• Neumorphic Radios
• Neumorphic Checkboxes

Install

npm install --save neumorphkit

Usage

import React, { Component } from 'react';

import { Button } from 'neumorphkit';

const handleClick = () => {
  console.log('hi');
};

const Example = () => {
  return <Button handleClick={handleClick}>Click me</Button>;
};

Components

Component	Available props	Description
Button	handleClick, active	handleClick: Callback function called when the user clicks the Neumorphic Button. active: default false. Setting to truthy value will put the button on its pressed appearance.
Surface	width, height	width: default none. width of the surface element. height: default. none. height of the surface element.
Binary	handleClick, options, title	Title: default none: Title of the binary component. options: default ["",""]. Array, the first 2 items must be type string. Each item will be displayed as an option handleClick: Callback function, receives as argument the option that the user has selected, if an option is deselected, null is passed as argument.
TextInput	name, value, handleChange, placeholderText	name: default none. name for the underlying text input. value: default none. value for the underlying text input. handleChange: default none: callback function assigned to the onChange prop for the underlying text input. placeholderText: default none: placeholder text assigned to the placeholder text input.
Checkbox	name, value, handleChange, label, checked	name: default none. name for the underlying text input. handleChange: default none. Callback function passed to the underlying input type=text. label: default none. label displayed to the right of the text input. checked: default false. passed to the checkbox input on its checked prop
Radio	name, handleChange, label, checked	name: default none. name for the underlying radio input. handleChange: default none. Callback function passed to the underlying input type=text as onChange prop. label: default none. label displayed to the right of the radio input. checked: default false. passed to the radio input on its checked prop.

License

MIT © FelipeLujan