react-pdf / styled-components Goto Github PK

3.0 2.0 3.0 79 KB

[DEPRECATED] styled-components bindings for react-pdf

JavaScript 100.00%

styled-components's Introduction

styled-components

styled-components bindings for react-pdf

Deprecated

This package will no longer be mantained, and I strongly recommend just using the StyleSheet primitive to style PDF documents. The reasons are:

It's been reported many times that some CSS properties are not transformed correctly by styled-components
This relies on a very old styled-components version, and I couldn't adjust the solution to new ones since it changed a lot internally
This won't reuse your pre-existing styled-components instance. It will ship the library twice generating a bigger bundle

Installation

yarn add @react-pdf/styled-components

Usage

@react-pdf/styled-components follows the same styled-components API

import styled from '@react-pdf/styled-components';

const Heading = styled.Text`
  margin: 10px;
  font-size: 22px;
  font-family: 'Helvetica';
`;

const MyDocument = () => (
  <Document>
    <Page>
      <Heading>
        D'oh!
      </Heading>
    </Page>
  </Document>
)

Supported components

Document
Page
View
Image
Text
Link

styled-components's People

Contributors

Stargazers

Watchers

Forkers

eladlevy kalimantos vitalie-severin

styled-components's Issues

Peer Dependencies prevent install with @react-pdf/renderer v2.0.0

Trying to install this module with @react-pdf/renderer v2.0.0 causes this error:

▶ npm i @react-pdf/styled-components
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: @react-pdf/[email protected]
npm ERR! node_modules/@react-pdf/renderer
npm ERR!   @react-pdf/renderer@"^2.0.0" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer @react-pdf/renderer@"^1.0.0" from @react-pdf/[email protected]
npm ERR! node_modules/@react-pdf/styled-components
npm ERR!   @react-pdf/styled-components@"*" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

Workaround is to install with legacy peer deps option:

npm i @react-pdf/styled-components --legacy-peer-deps

But ideally this package would have its peer-dependencies updated so that it can work with the new version of @react-pdf/renderer without having to add the option to all the install scripts.

Cannot multiple text styling

Hey.. I am trying to styling Text using
font-weight: bold; font-style: italic;

and the problem has showed up. The text only read one of that css style.

This is my code:

export const BI = style.Text`
    font-weight: bold;
    font-style: italic;
`;

export const Row = style.View`
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    margin-bottom: ${props => {
      return props.mb ? props.mb : "4px";
    }}
`;

export const Container = style.View`
    margin: 16.56px 36.72px 0px 39.6px;
    font-family: 'Roboto';
    background-color: #fff;
    font-size: 10px;
`;

export const Col = style.View`
    width: ${props => {
      return props.width ? props.width : "auto";
    }}
`;

const Report = ({data}) => (
   <Document>
      <Page size="A4">
         <Container>
            <Row>
               <Col>
                   <BI>This is some text.</BI>
               </Col>
            </Row>
         </Container>
      </Page>
   </Document>
);

Error render styled component web version

Uncaught TypeError: Failed to set an indexed property on 'CSSStyleDeclaration': Index property setter is not supported.

Error while rendering styled component

When i try to use this styled-component

import styled from '@react-pdf/styled-components';

const Content = styled.View`
  flex: 1;
  height: 100%;
  font-size: 9;
  line-height: 1.22;
`;

// inside my component is used like
<Content>
  <Text>some content</Text>
</Content>

this error is throwed:

Uncaught TypeError: _root2.default is not a constructor
    at SafeParser.Parser
    at new SafeParser
    at safeParse
    at InlineStyle.generateStyleObject
    at StyledNativeComponent.generateAndInjectStyles
    at StyledNativeComponent.componentWillMount
    at callComponentWillMount
    at mountClassInstance
    at updateClassComponent
    at beginWork

Type definitions

Are there any typescript typedefinitions available for this package? I tried grabbing the type definitions directly from the 'styled-components' package:

declare module '@react-pdf/styled-components'
{
  export * from '@types/styled-components';
}

declare module '@react-pdf/styled-components'
{
  export { default } from '@types/styled-components';
}

but I still get type errors like:
Property 'Text' does not exist on type 'typeof import("@react-pdf/styled-components")'.
or
Type 'Style' is not assignable to type 'CSSProperties'

Update to style-components v4

I think this package will benefit a lot if it is updated to styled-components v4

Error with View component

I am trying to style the View but getting this:
The above error occurred in the <VIEW> component
Uncaught (in promise) Error: Type mismatch

const Overlap = styled.View`
  position: relative;
  height: 16px;
  width: ${props => props.width}%;
  background: blue;
`

I am using this inside a map function to dynamically generate content

Lots of Deprecated Lifecycle Method warnings

Warning: componentWillMount has been renamed, and is not recommended for use. See https://fb.me/react-async-component-lifecycle-hooks for details.

* Move code with side effects to componentDidMount, and set initial state in the constructor.
* Rename componentWillMount to UNSAFE_componentWillMount to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run `npx react-codemod rename-unsafe-lifecycles` in your project source folder.

Please update the following components: styled.TEXT, styled.VIEW
Warning: componentWillReceiveProps has been renamed, and is not recommended for use. See https://fb.me/react-async-component-lifecycle-hooks for details.

* Move data fetching code or side effects to componentDidUpdate.
* If you're updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps. Learn more at: https://fb.me/react-derived-state
* Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run `npx react-codemod rename-unsafe-lifecycles` in your project source folder.

Please update the following components: styled.TEXT, styled.VIEW

webpack 'unsafe-eval'

Hi. I'm trying to use @react-pdf/styled-components but i always get an error (on screenshot)

My webpack.config:

const path = require('path');


module.exports = (webpackConfigEnv) => {

    return  {
        entry: path.join(
            __dirname,
            `./src/build.js`
        ),
        output: {
            path: path.join(__dirname, 'build'),
            filename: 'index.js',
            publicPath: '/',
            libraryTarget: "system",
        },
        module: {
            rules: [
                {
                    parser: {
                        system: false,
                    },
                },
                {
                    test: /\.(js|ts)x?$/,
                    exclude: /node_modules/,
                    use: {
                        loader: "babel-loader",
                    },
                },
                {
                    // include: /node_modules/,
                    test: /\.css$/,
                    use: ['style-loader', 'css-loader'],
                },
                {
                    test: /\.s[ac]ss$/i,
                    use: [
                        // Creates `style` nodes from JS strings
                        'style-loader',
                        // Translates CSS into CommonJS
                        'css-loader',
                        // Compiles Sass to CSS
                        'sass-loader',
                    ],
                },
            ],
        },
        externals: ["single-spa", 'react', 'react-dom'],
        resolve: {
            modules: ['node_modules'],
        },
    };
};

.babelrc

{
    "presets": ["@babel/preset-env", "@babel/preset-react"],
    "plugins": [
        "babel-plugin-styled-components",
        "@babel/plugin-proposal-class-properties",
        [
            "@babel/plugin-transform-runtime",
            {
                "useESModules": true,
                "regenerator": false
            }
        ],
    ]
}

Could you help me with this? Thank you in advance.