Skip to content

Instantly share code, notes, and snippets.

@carl0zen

carl0zen/prop-receivers.jsx

Last active September 2, 2020 10:24
Show Gist options
  • Save carl0zen/bcb7d275546ab344805a032e9d659bbc to your computer and use it in GitHub Desktop.
Save carl0zen/bcb7d275546ab344805a032e9d659bbc to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. Carlos Perez revised this gist Jan 3, 2017. 1 changed file with 24 additions and 16 deletions.
    40 changes: 24 additions & 16 deletions prop-receivers.jsx
    View file
    Original file line number Diff line number Diff line change
    @@ -1,25 +1,33 @@
    // Prop passing Shorthands for Styled-components
    export const borderProps = props => css`
    ${props.borderBottom && `border-bottom: ${props.borderWidth || "1px"} solid ${color.border}`};
    ${props.borderTop && `border-top: ${props.borderWidth || "1px"} solid ${color.border}`};
    ${props.borderLeft && `border-left: ${props.borderWidth || "1px"} solid ${color.border}`};
    ${props.borderRight && `border-right: ${props.borderWidth || "1px"} solid ${color.border}`};
    `;

    export const borderProps = (props) => `
    ${props.borderBottom && `border-bottom: 1px solid ${color.border}`};
    ${props.borderTop && `border-top: 1px solid ${color.border}`};
    ${props.borderLeft && `border-left: 1px solid ${color.border}`};
    ${props.borderRight && `border-right: 1px solid ${color.border}`};
    `

    export const marginProps = (props) => `
    ${props.marginBottom && `margin-bottom: ${typeof(props.marginBottom) === "string" ? props.marginBottom : '1em' };`}
    ${props.marginTop && `margin-top: ${typeof(props.marginTop) === "string" ? props.marginTop : '1em' };`}
    ${props.marginLeft && `margin-left: ${typeof(props.marginLeft) === "string" ? props.marginLeft : '1em' };`}
    ${props.marginRight && `margin-right: ${typeof(props.marginRight) === "string" ? props.marginRight : '1em' };`}
    `

    export const marginProps = props => css`
    ${props.marginBottom && `margin-bottom: ${typeof (props.marginBottom) === "string" ? props.marginBottom : "1em"}`};
    ${props.marginTop && `margin-top: ${typeof (props.marginTop) === "string" ? props.marginTop : "1em"}`};
    ${props.marginLeft && `margin-left: ${typeof (props.marginLeft) === "string" ? props.marginLeft : "1em"}`};
    ${props.marginRight && `margin-right: ${typeof (props.marginRight) === "string" ? props.marginRight : "1em"}`};
    ${props.margin && `margin: ${typeof (props.margin) === "string" ? props.margin : "1em"}`};
    ${props.marginVertical && `
    margin-top: ${typeof (props.marginVertical) === "string" ? props.marginVertical : "1em"}
    margin-bottom: ${typeof (props.marginVertical) === "string" ? props.marginVertical : "1em"}
    `};
    ${props.marginHorizontal && `
    margin-left: ${typeof (props.marginHorizontal) === "string" ? props.marginHorizontal : "1em"}
    margin-right: ${typeof (props.marginHorizontal) === "string" ? props.marginHorizontal : "1em"}
    `};
    `;
    // An example of how you can use it with your components

    const SomeDiv = styled.div`
    ${props => borderProps(props)}
    ${borderProps}
    ${marginProps}
    `

    // This lets you pass all borderProps to the component like so:

    <SomeDiv borderTop borderBottom borderLeft borderRight>
    <SomeDiv borderTop borderBottom borderLeft borderRight marginVertical>
  2. Carlos Perez revised this gist Nov 18, 2016. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion prop-receivers.jsx
    View file
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,4 @@
    // Prop passing Shorthands
    // Prop passing Shorthands for Styled-components

    export const borderProps = (props) => `
    ${props.borderBottom && `border-bottom: 1px solid ${color.border}`};
  3. Carlos Perez revised this gist Nov 18, 2016. 1 changed file with 11 additions and 1 deletion.
    12 changes: 11 additions & 1 deletion prop-receivers.jsx
    View file
    Original file line number Diff line number Diff line change
    @@ -12,4 +12,14 @@ export const marginProps = (props) => `
    ${props.marginTop && `margin-top: ${typeof(props.marginTop) === "string" ? props.marginTop : '1em' };`}
    ${props.marginLeft && `margin-left: ${typeof(props.marginLeft) === "string" ? props.marginLeft : '1em' };`}
    ${props.marginRight && `margin-right: ${typeof(props.marginRight) === "string" ? props.marginRight : '1em' };`}
    `
    `

    // An example of how you can use it with your components

    const SomeDiv = styled.div`
    ${props => borderProps(props)}
    `

    // This lets you pass all borderProps to the component like so:

    <SomeDiv borderTop borderBottom borderLeft borderRight>
  4. Carlos Perez created this gist Nov 18, 2016.
    15 changes: 15 additions & 0 deletions prop-receivers.jsx
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,15 @@
    // Prop passing Shorthands

    export const borderProps = (props) => `
    ${props.borderBottom && `border-bottom: 1px solid ${color.border}`};
    ${props.borderTop && `border-top: 1px solid ${color.border}`};
    ${props.borderLeft && `border-left: 1px solid ${color.border}`};
    ${props.borderRight && `border-right: 1px solid ${color.border}`};
    `

    export const marginProps = (props) => `
    ${props.marginBottom && `margin-bottom: ${typeof(props.marginBottom) === "string" ? props.marginBottom : '1em' };`}
    ${props.marginTop && `margin-top: ${typeof(props.marginTop) === "string" ? props.marginTop : '1em' };`}
    ${props.marginLeft && `margin-left: ${typeof(props.marginLeft) === "string" ? props.marginLeft : '1em' };`}
    ${props.marginRight && `margin-right: ${typeof(props.marginRight) === "string" ? props.marginRight : '1em' };`}
    `