npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

iblis-simple-crud

v0.0.6

Published

Beautiful React UI component built with Material-UI to manage (create, update and delete) a simple object list

Downloads

5

Readme

Iblis Simple Crud

Beautiful React UI component built with Material-UI to manage (create, update and delete) a simple object list

NPM version

Example

Demos

Why

When you develop a web app, you always need to have an UI to manage simple object. For example a list of admin email, a list of categories, ... Mostly what you need is to edit one text field. You don't need pagination or filer, ect ...

After some search, no React component libraries has the following requirements :

  • Written in pure Typescript
  • Use last version of Material-UI
  • Use last version of Formik
  • Agnostic of any calling server libraries
  • No state maintain by the components under the hood (if you want refresh the data, change the props of your component)
  • Fully responsive
  • Detailed documentation
  • Easy to use and yet customizable
  • Easy to change the look with Material-UI Theme

Documentation and Basic Usage

All props and documented example can be found in the storybook

Install

Install the library and the dependencies to your React project

npm install iblis-simple-crud @material-ui/core @material-ui/icons formik@next

Test

You can see many visual implemenation of the components in the storybook

You can launch test by running npm run test

Dev

To launch dev environement with storybook npm run start

Then you will be able to see your components and test it on http://localhost:9010

All the documention and test are done in the stories folder

Contribute

  1. Fork this repository to your own GitHub account and then clone it to your local device
  2. Make the necessary changes and ensure that the tests are passing
  3. Send a pull request

Todo

  • Write more tests with jest

Known issues

  • None for the moment

Thanks

License

Please, refer to LICENSE file