Customization

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

Once installed, just extend the Horcrux component with all the new styles (or whatever) you need.

Here is an example where we are using the Button component, but customizing the background color and other props:

import { Button } from 'horcrux';

const YourButton = Button.extend`
  background-color: SlytherinGreen;
  color: SlytherinGreen;

  &:hover {
    background-color: deathEaterBlack;
    color: ghostWhite;
  }
`;


const ViewComponent = () => (
 <YourButton onClick={doSomething}>
   cast spell
 </YourButton>
);

You will be able to utilize all other styled-component features for all Horcrux components if it suits your fancy (double-whammy).