diff --git a/README.md b/README.md index ea6078a..3aa8453 100644 --- a/README.md +++ b/README.md @@ -50,8 +50,9 @@ You can customize almost every aspect of this component using the below props, o | children | ReactNode | null | Use this if you want to use some custom component inside the anchor tag. | | defaultTooltip | string | "Copy email address" | Text shown in the tooltip when the user hovers over the link. | | copiedTooltip | string | "Copied to clipboard!" | Text shown in the tooltip when the user clicks on the link and the text is copied to clipboard. | -| containerStyles | style object | none | The styles to be applied to the anchor container | +| containerStyles | style object | none | The styles to be applied to the container | | tooltipStyles | style object | none | The styles to be applied to the tooltip | +| anchorStyles | style object | none | The styles to be applied to the anchor | ## Development diff --git a/src/lib/index.tsx b/src/lib/index.tsx index 7fead5b..9cf83b8 100644 --- a/src/lib/index.tsx +++ b/src/lib/index.tsx @@ -57,6 +57,7 @@ const CopyMailTo = ({ copiedTooltip = "Copied to clipboard!", containerStyles = {}, tooltipStyles = {}, + anchorStyles = {}, }: { email: string; children?: React.ReactNode; @@ -64,6 +65,7 @@ const CopyMailTo = ({ copiedTooltip?: string; containerStyles?: React.CSSProperties; tooltipStyles?: React.CSSProperties; + anchorStyles?: React.CSSProperties; }): JSX.Element => { const [showCopied, setShowCopied] = React.useState(false); const [showTooltip, setShowTooltip] = React.useState(false); @@ -112,6 +114,7 @@ const CopyMailTo = ({ onFocus={displayTooltip} onBlur={hideTooltip} href={`mailto:${email}`} + style={anchorStyles} > {children || email}