Nitrogen Peroxide Monoxide

    react-flexylayout
    TypeScript icon, indicating that this package has built-in type declarations

    0.8.0 • Public • Published

    React Flex Layout

    React components for creating responsive flex layout inspired by @angular/flex-layout

    Install

    npm i -s react-flexylayout
    

    API

    The api provides 3 components: FlexProvider, FlexRow, , FlexItem

    FlexProvider is just the simple provider you need to wrap around

    FlexRow is the row or container around your items

    FlexItem is a single item inside a FlexRow

    FlexRow properties

    • layout: Defines the flow order of child items within a flexbox container <FlexRow layout="row" />
    • gap: Defines if child items within a flexbox container should have a gap <FlexRow gap="10px" />
    • align: Defines how flexbox items are aligned according to both the main-axis and the cross-axis, within a flexbox container <FlexRow align="flex-start stretch" />
    • element: you can specify the html element of FlexRow by default is div

    FlexItem properties

    • size: This markup specifies the resizing of its host element within a flexbox container flow <FlexItem size="50%" />
    • align: Defines how flexbox items are aligned according to both the main-axis and the cross-axis, within a flexbox container <FlexItem align="flex-start stretch" />
    • offset: Offset a flexbox item in its parent container flow layout <FlexItem offset="15px" />
    • order: Defines the order of a flexbox item <FlexItem order="2" />
    • fill: Maximizes width and height of element in a layout container <FlexItem fill />
    • element: you can specify the html element of FlexItem by default is div

    Responsive API

    Out of the box the componet provides fallowing breakpoints

    • xs: "screen and (max-width: 599px)"
    • sm: "screen and (min-width: 600px) and (max-width: 959px)"
    • md: "screen and (min-width: 960px) and (max-width: 1279px)"
    • lg: "screen and (min-width: 1280px) and (max-width: 1919px)"
    • xl: "screen and (min-width: 1920px) and (max-width: 5000px)"

    All props have according responsive version, when responsive version is not provided it uses default one. The sintaxis for those properties is [prop][breakpoint] like so sizeXs ( notice the uppercase of the breakpoint )

    Example: <FlexItem size="50%" sizeXs="100%" sizeXl="25%" />

    Example

    import { FlexRow, FlexProvider, FlexItem } from "react-flexlayout";
    
    function App() {
      return (
          <FlexProvider>
            <FlexRow layout="row wrap" gap="10px">
              <FlexItem size="80px" sizeXs="50%" order="2" orderXs="1">
                Item 1
              </FlexItem>
              <FlexItem size="80px" sizeXs="50%" order="1" orderXs="2">
                Item 2
              </FlexItem>
              <FlexItem size="50px" sizeXs="50%" align="end">
                Item 3
              </FlexItem>
            </FlexRow>
          </FlexProvider>
      );
    }
    

    Custom breakpoints

    You can provide a config object to specify custom sizes and names for your media query breakpoints:

    • queries: Object containign media queries
    • behaviour: One of "replace" or "overrider", the default is replace.
      • override the whole default media queries has been overrided.
      • replace Its only update / append new media queries to default ones

    Example

    const config = {
      queries: {
        xs: "screen and (max-width: 700px)",
        sm: "screen and (min-width: 701px) and (max-width: 959px)",
      },
      behaviour: "replace",
    };
    
    <FlexProvider config={config}>
     <App />
    </FlexProvider>
    

    ToDo

    • Add types

    Keywords

    none

    Install

    npm i react-flexylayout

    DownloadsWeekly Downloads

    3

    Version

    0.8.0

    License

    ISC

    Unpacked Size

    85.5 kB

    Total Files

    17

    Last publish

    Collaborators

    • mutebg
    • lyuboslav.lyubenov