neumorphism-react's Introduction

Neumorphism React

Neumorphism React is a React neumorphism components library designed to provide ready to use components following the neumorphism UI/UX trend.

Documentation

You will find the full documentation and examples of the component library here

! Notice that the documentation is in building state so, some things may be missing !

The library is available on npm

Library installation

Dependencies

Neumorphism React requires the installation of the @emotion/core and @emotion/styled packages:

npm install --save @emotion/core @emotion/styled

or

yarn add @emotion/core @emotion/styled

Package installation

To install the Neumorphism React package, run the following command:

npm install --save neumorphism-react

or

yarn add neumorphism-react

Contributing

The project repository is available here

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.

Tech stack

React
styleguidist for component visualization and documentation
emotion for component styling
jest for testing
eslint for code linting
rollup for bundling

Setup and launch the project

Clone the project:

git clone https://github.com/ZanchiTheo/neumorphism-react.git

Install dependencies:

yarn install

Launch the styleguidist server:

yarn start

Access the project at localhost:6060

License

MIT

neumorphism-react's People

Contributors

Stargazers

Watchers

neumorphism-react's Issues

Brilliant

Hi Zanchi, this is brilliant - excellent work on creating this library.
I tried few other neumorphic libraries but this one is good and easy to work with.

I strongly suggest you to post some medium, dev.io articles to spread the word.
The documentation MD files can be converted/hosted as github pages.

Just-my-2-cents

Setting props

Hi @ZanchiTheo

For all components, you should add style props to quickly fix minor things like padding and margins.

example:

<NeuTextInput padding={20} margin={} />
<NeuTextInput paddingBottom={20} marginTop={15} />

Add support for extra props to be passed down

So first of all, I love this library ! Its really great as it is easy to use and is the most flexible I have found so far as to the customizing options you offer, really great job !

Now, do you think you would be able to allow users to pass down other props (such as onClick, or onMouseEnter/Leave etc..) to your components or is there a specific reason you don't want to allow that ? Because it is making it very difficult to work with them as practical elements without wrapping them in HOCs, which is not very ideal to style..

Also, would it be possible to pass down the style prop so that we can overwrite some of the default style properties you set in place ? This would make it flexible to work with

One more thing, would it be possible to add support for height and width properties other than numbers (e.g.: min-content, percentages etc...) or would that break your code ? if so, I have seen that changing the width and height from the console after the fact seems to work just fine, so maybe allow us to overwrite the default and keep the properties the same?

In any case, thanks for the library and great job again !

Recommend Projects

zanchitheo / neumorphism-react Goto Github PK