# react-horcrux

> React web UI Library

Latest version **2.0.0** (published 2018-06-09) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-horcrux
pnpm add react-horcrux
yarn add react-horcrux
bun add react-horcrux
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.0 |
| Published | 2018-06-09 |
| First published | 2017-09-18 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 6 |
| Unpacked size | 565.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 7 |
| Author | Casey Baggz |
| Maintainers | caseybaggz |
| Keywords | react, react, component, react, ui, library, ui, library, jest, es6, babel, react, web, enzyme, styled-components |

## Links

- npm: https://www.npmjs.com/package/react-horcrux
- Repository: https://github.com/caseybaggz/horcrux
- Issues: https://github.com/caseybaggz/horcrux/issues
- npm.io page: https://npm.io/package/react-horcrux

## Dependencies (6)

- [react](https://npm.io/package/react.md) ^16.4.0
- [animated](https://npm.io/package/animated.md) ^0.2.2
- [react-dom](https://npm.io/package/react-dom.md) ^16.4.0
- [prop-types](https://npm.io/package/prop-types.md) ^15.6.1
- [styled-components](https://npm.io/package/styled-components.md) ^3.3.2
- [react-test-renderer](https://npm.io/package/react-test-renderer.md) ^16.4.0

## Alternatives

- [@progress/kendo-ooxml](https://npm.io/package/@progress/kendo-ooxml.md) — 152.1K weekly downloads
- [@progress/kendo-react-ripple](https://npm.io/package/@progress/kendo-react-ripple.md) — 8.0K weekly downloads
- [@progress/kendo-react-orgchart](https://npm.io/package/@progress/kendo-react-orgchart.md) — 4.3K weekly downloads
- [@praxisui/dynamic-fields](https://npm.io/package/@praxisui/dynamic-fields.md) — 2.4K weekly downloads
- [@mesalvo/react-ui](https://npm.io/package/@mesalvo/react-ui.md) — 1.7K weekly downloads

## Recent versions

- 2.0.0 (latest) — 2018-06-09
- 1.0.6 — 2018-01-06
- 1.0.5 — 2017-09-25
- 1.0.4 — 2017-09-22
- 1.0.3 — 2017-09-21
- 1.0.2 — 2017-09-18
- 1.0.1 — 2017-09-18
- 1.0.0 — 2017-09-18

## README

![logo](https://user-images.githubusercontent.com/4819738/30342556-e4df6752-97bf-11e7-9605-32de0b92912d.png)

[![Build Status](https://travis-ci.org/caseybaggz/horcrux.svg)](https://travis-ci.org/caseybaggz/horcrux) [![npm](https://img.shields.io/npm/dm/horcrux.svg)](https://npmjs.com/package/react-horcrux) [![Issue Stats](https://img.shields.io/issuestats/i/github/caseybaggz/horcrux.svg)](http://github.com/caseybaggz/horcrux/issues) [![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg)](https://github.com/prettier/prettier)

Perfect for Buttons, Inputs, or any other UI related component you want to add into your React app. Easy to extend, style, and integrate into your project (React-Native compatability coming soon!).

## Contents
* [User Guide & Docs](https://caseybaggz.gitbooks.io/horcrux/content/)
* [All demos](https://caseybaggz.github.io/horcrux/?selectedKind=Alert&selectedStory=default&full=0&down=1&left=1&panelRight=0&downPanel=storybook%2Factions%2Factions-panel)

## Installation
yarn:
```
yarn add react-horcrux
```

npm
```
npm install react-horcrux
```

## Components (spells)
We've tried to make usage as easy as possible, so most all (non-advanced) components are used the exact way you would use its default version in React. For example, the `Button` takes an `onClick` prop and the `Input` takes any prop you would normally add to an `input` component.

Example:
```
import { Button, Input } from 'react-horcrux';

export default YourComponent function() {
  return(
    <div>
      <form>
        <Input
          placeholder="harry potter"
          maxLength="222"
          type="text"
          required
          value={someBoundValue}
        />

        <Button onClick={doSomething}>do it</Button>
      </form>
    </div>
  );
}
```

## Customizing (potions)
We realize not all of our spells will tickle your fancy, so we've decided to allow you to cook up some potions to enhance our spells. For now, we've built all of our non-advanced components using [styled-components](https://github.com/styled-components/styled-components) which will give you a large spectrum of additions you can use to make any updates necessary. To take advantage of this you will need to install `styled-components` into your app.

Example (updating some colors):
```
import styled from 'styled-components';
import { Button } from 'react-horcrux';

const NewButton = Button.extend`
  background-color: tomato;

  &:hover {
    background-color: black;
  }
`;

export default NewButton function({...props}) {
  return <NewButton {...props}>this is your new button</NewButton>;
}
```

## Upcoming Spells
We are in the official beginning stages of this library, but to give you a sneak peak on what is to come, here are our list of TODO's to incorporate ASAP:

* Dropdown
* Datepicker
* Modal
* Tabview (headers with an animating bar that switches content to be displayed)

If there is anything else you would like added, feel free to let us know or submit a PR!

Thanks for all the support and keep staying "up to no good".

---
_Source: https://npm.io/package/react-horcrux · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._