llorentegerman / simple-flexbox Goto Github PK

View Code? Open in Web Editor NEW

38.0 38.0 6.0 1.09 MB

A simple way to make responsive layouts using Flexbox in React

License: MIT License

JavaScript 75.25% TypeScript 24.75%

simple-flexbox's People

Contributors

Stargazers

Watchers

Forkers

qkreltms kprocks86 mattcfilbert p-somers wade-montague super-go-team

simple-flexbox's Issues

Supporting semantic elements

How about supporting semantic elements?

I think all we need to change is Layout's element div to semantic elements.

        return (<div style={layoutStyles} {...ownProps}>
            {this.props.children}
        </div>);

I have example link : https://github.com/nachoaIvarez/flexbox-react/blob/master/src/Flexbox.jsx

ref is not supporting

I've tried to get offsetWidth from Column's ref.current, but it prints undefined.
We need to support ref.

It's not works

      <Column  ref={this.thisComponent}>
        <div>test</div>
        <div>test2</div>
      </Column>

It works

      <div ref={this.thisComponent}>
        <div>test</div>
        <div>test2</div>
      </div>

By the way material-ui supports ref this way although it uses hook
https://github.com/mui-org/material-ui/blob/5301c24c3be1023efcec7e33bd7e7f030a87c0cb/packages/material-ui/src/Typography/Typography.js#L122-L163

const Typography = React.forwardRef(function Typography(props, ref) {
  const {
    align = 'inherit',
    classes,
    className,
    color = 'initial',
    component,
    display = 'initial',
    gutterBottom = false,
    noWrap = false,
    paragraph = false,
    theme,
    variant = 'body1',
    variantMapping = defaultVariantMapping,
    ...other
  } = props;


  const Component =
    component ||
    (paragraph ? 'p' : variantMapping[variant] || defaultVariantMapping[variant]) ||
    'span';


  return (
    <Component
      className={clsx(
        classes.root,
        {
          [classes[variant]]: variant !== 'inherit',
          [classes[`color${capitalize(color)}`]]: color !== 'initial',
          [classes.noWrap]: noWrap,
          [classes.gutterBottom]: gutterBottom,
          [classes.paragraph]: paragraph,
          [classes[`align${capitalize(align)}`]]: align !== 'inherit',
          [classes[`display${capitalize(display)}`]]: display !== 'initial',
        },
        className,
      )}
      ref={ref}
      {...other}
    />
  );
});

Issue while building

I'm having this issue while building my Gatsby website, any idea how to fix it?

"window" is not available during server side rendering.

See our docs page for more info on this error: https://gatsby.dev/debug-html

497 | return _extends({}, style, window.innerWidth <= +key ? { flexDirection: value } : {});
498 | }

499 | return _extends({}, style, window.innerWidth <= +key ? value : {});
| ^
500 | }, {});
501 |
502 | var classNames = ((className || '') + ' ' + breakpointsClassNames.join(' ')).trim();

WebpackError: ReferenceError: window is not defined

index.js:499
node_modules/simple-flexbox/build/index.js:499:35
index.js:485 Layout.render
node_modules/simple-flexbox/build/index.js:485:14

Change Property name componentRef

You may think the property name componentRef is not a familiar word.

You may want to change it to ref, but It seemed Class Component does not allowed to use ref as a prop's name. (https://reactjs.org/warnings/special-props.html)

You may want to change it to Functional Component with React.forwadRef() (for this we should update react >= 16.3 )

Typescript is not supported

Note: I pull requested this issue see: #3

When I type npm install @types/simple-flexbox the "Not found" error occurred so we need to support type declaration for it.

Apart from it I made my own declaration file :

/// <reference types="react" />

declare module 'simple-flexbox' {
    declare class Column extends React.Component<ColumnProps> {}
    declare class Row extends React.Component<RowProps> {}

    declare interface ColumnProps {
        onClick?: (e: React.MouseEvent) => void;
        className?: string
        style?: React.CSSProperties
        flexGrow?: number
        wrap?: boolean
        flex?: string,
        flexShrink?: number
        flexBasis?: string
        breakpoints?: object
        reverse?: boolean
        children: any
        vertical?: 'start' | 'center' | 'end' | 'spaced' | 'space-between' | 'around' | 'space-around' | 'space-evenly'
        horizontal?: 'start' | 'center' | 'end' | 'stretch'
        justifyContent?: 'start' | 'flex-start' | 'center' | 'end' | 'flex-end' | 'spaced' | 'space-between' | 'around' | 'space-around' | 'space-evenly'
        alignItems?: 'start' | 'center' | 'end' | 'stretch' | 'baseline'
        alignSelf?: 'start' | 'center' | 'end' | 'stretch' | 'baseline'
        alignContent?: 'start' | 'flex-start' | 'center' | 'end' | 'flex-end' | 'spaced' | 'space-between' | 'around' | 'space-around' | 'stretch'
    }

    declare interface RowProps {
        onClick?: (e: React.MouseEvent) => void;
        className?: string
        style?: React.CSSProperties
        wrap?: boolean
        reverse?: boolean
        flex?: string
        flexGrow?: number
        flexShrink?: number
        flexBasis?: string
        breakpoints?: object
        children: any
        vertical?: 'start' | 'center' | 'end' | 'spaced' | 'baseline'
        horizontal?: 'start' | 'center' | 'end' | 'spaced' | 'space-between' | 'around' | 'space-around' | 'space-evenly'
        justifyContent?: 'start' | 'flex-start' | 'center' | 'end' | 'flex-end' | 'spaced' | 'space-between' | 'around' | 'space-around' | 'space-evenly'
        alignItems?: 'start' | 'center' | 'end' | 'stretch' | 'baseline' 
        alignSelf?: 'start' | 'center' | 'end' | 'stretch' | 'baseline' 
        alignContent?: 'start' | 'flex-start' | 'center' | 'end' | 'flex-end' | 'spaced' | 'space-between' | 'around' | 'space-around' | 'stretch' 
    }
}

Steps to solve this issue

I made index.d.ts in my root folder
example:

typescript-playground
 |
 | ├── src
 | ├── public
 | ├── node_modules
 | ├── @types
 |         ├── simple-flexbox
 |                ├── index.d.ts

Add "typeRoots": ["./node_modules/@types", "./@types"] in your tsconfig.json
example:

{
  "compilerOptions": {
    "target": "es5",ue,
    "skipLibCheck": true,
    "..."
    "typeRoots": ["./node_modules/@types", "./@types"]
  },
}

Copy and paste the code that I wrote above into index.d.ts .

webpack in prod dependencies

Can webpack be moved to dev-dependencies? This is causing issues in my project which uses a newer version of react

Adding <form> element as semantic element

How about adding form element as a semantic element?
It uses as a container of inputs so we should add it into our code.

 element: PropTypes.oneOf([**_'form',_** 'article', 'aside', 'div', 'figure', 'footer', 'header', 'main', 'nav', 'section'])

llorentegerman / simple-flexbox Goto Github PK

simple-flexbox's People

Contributors

Stargazers

Watchers

Forkers

simple-flexbox's Issues

Supporting semantic elements

ref is not supporting

Issue while building

Change Property name componentRef

Typescript is not supported

webpack in prod dependencies

Adding <form> element as semantic element

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent

Jobs