simple-components-react

1.0.22 verified Fri May 01 auth: no javascript abandoned

A React component library inspired by Element UI (Vue), providing basic to advanced UI components. Current version is 1.0.22, with no recent updates (likely abandoned). It depends on React 16.8.6+ and lodash. The library includes components like Checkbox, Button, Switch, Timeline, and more. It is not actively maintained and lacks documentation beyond the README. Alternatives: Material-UI, Ant Design.

Common errors

error Module not found: Can't resolve 'simple-components-react' ↓

cause Package not installed or not in node_modules.

fix

Run 'npm install simple-components-react'.

error Attempted import error: 'Button' is not exported from 'simple-components-react' ↓

cause Using incorrect import syntax or older version.

fix

Use 'import { Button } from 'simple-components-react'' correctly.

Warnings

deprecated Project is abandoned; no updates since 2019. Use at your own risk. ↓

fix Consider migrating to a maintained library like Ant Design or Material-UI.

gotcha Event handler props must be prefixed with 'on' (e.g., onClick, onChange) as per the library's convention. ↓

fix Use `onChange` instead of `change` for event props.

gotcha Lodash is a peer dependency; must be installed separately. ↓

fix Run 'npm install lodash' in your project.

Install

npm install simple-components-react

yarn add simple-components-react

pnpm add simple-components-react

Imports

Button

wrong

import Button from 'simple-components-react/Button'

correct

import { Button } from 'simple-components-react'

Named export from main package.

Checkbox

wrong

const Checkbox = require('simple-components-react').Checkbox

correct

import { Checkbox } from 'simple-components-react'

ESM import preferred; CJS require works but not common.

Switch

import { Switch } from 'simple-components-react'

Named export; no default export.

Quickstart

Shows how to import and use three components (Button, Checkbox, Switch) in a React app.

import React from 'react';
import { Button, Checkbox, Switch } from 'simple-components-react';

function App() {
  return (
    <div>
      <Button>Click me</Button>
      <Checkbox label="Option" />
      <Switch defaultChecked />
    </div>
  );
}

export default App;