https://github.com/caseybaggz/horcrux

React web UI library 💀🐍🦉
https://github.com/caseybaggz/horcrux

react react-component react-components react-ui reactjs storybook ui-components ui-library

Last synced: 9 months ago
JSON representation

React web UI library 💀🐍🦉

• Host: GitHub
• URL: https://github.com/caseybaggz/horcrux
• Owner: caseybaggz
• Created: 2017-09-12T16:00:38.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2018-06-09T17:14:43.000Z (almost 8 years ago)
• Last Synced: 2025-08-09T14:30:10.620Z (10 months ago)
• Topics: react, react-component, react-components, react-ui, reactjs, storybook, ui-components, ui-library
• Language: JavaScript
• Homepage: https://caseybaggz.gitbooks.io/horcrux/content/
• Size: 677 KB
• Stars: 7
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md

Awesome Lists containing this project

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(

    


      

        


        do it

      

    

  );

}

```


## 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 this is your new button;

}

```

## 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".