Ninja Pumpkin Mutants

    hops-styled-components
    TypeScript icon, indicating that this package has built-in type declarations

    15.2.1 • Public • Published

    hops-styled-components

    npm

    Please see the main Hops Readme for general information and a Getting Started Guide.

    This is a preset for Hops that can be used to set up a <ThemeProvider /> and enable server-side rendering support for styled-components in Hops.

    Installation

    This preset must be used together with the hops-react preset.

    Add this preset and its peer dependency styled-components to your existing Hops React project:

    npm install --save hops-styled-components styled-components

    If you don't already have an existing Hops project read this section on how to set up your first Hops project.

    Usage

    After installing this preset you can use styled-components in your application.

    import { render } from 'hops-react';
    import styled from 'styled-components';
    const Headline = styled.h1`
      color: rebeccapurple;
    `;
    export default render(<Headline>Hello World!</Headline>);

    Check out this integration test as an example for how to use this preset.

    Configuration

    Preset Options

    This preset has no preset configuration options.

    Render Options

    This preset has only a single runtime option which can be passed to the render() options inside the styled key (see example below).

    Name Type Default Required Description
    styled.theme Object {} no A theme object for the styled-components <ThemeProvider />
    theme

    In order to use theming with styled-components, this preset wraps your application in a <ThemeProvider />.

    Example:

    const myTheme = {
      primaryColor: 'black',
    };
    export default render(<MyApp />, { styled: { theme: myTheme } });

    Install

    npm i hops-styled-components

    DownloadsWeekly Downloads

    167

    Version

    15.2.1

    License

    MIT

    Unpacked Size

    11.1 kB

    Total Files

    9

    Last publish

    Collaborators

    • robertkowalski
    • zaubernerd
    • jhiode
    • knisterpeter
    • hops-release
    • dmbch
    • aithir
    • robin-drexler