Merge pull request #14 from neynarxyz/ds/neyn-2229-add-custom-css-to-…

…profile-component add: `customStyles` prop for `NeynarProfileCard`
neynarxyz · Jul 18, 2024 · 44d52a0 · 44d52a0
2 parents 63609d4 + d368c66
commit 44d52a0
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 12 deletions.
diff --git a/README.md b/README.md
@@ -79,6 +79,7 @@ This component displays a user's Farcaster profile information.
 Params:
 - `fid` (number): The FID of the user to display.
 - `viewerFid?` (number): The FID of the viewer. Default: undefined.
+- `customStyles?` (CSSProperties): Custom styles for the profile card. Default: {}
 
 Usage:
 ```tsx
@@ -98,6 +99,7 @@ Params:
 - `identifier` (string): The identifier (either URL or hash) for the cast.
 - `viewerFid?` (number): The FID of the viewer. Default: undefined.
 - `allowReactions?` (boolean, default = true): Whether to allow reactions on the cast, and when this is true the component default to using Neynar reactions
+- `customStyles?` (CSSProperties): Custom styles for the cast card. Default: {}
 
 Usage:
 ```tsx

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@neynar/react",
-  "version": "0.6.0",
+  "version": "0.6.1",
   "description": "Farcaster frontend component library powered by Neynar",
   "main": "dist/bundle.cjs.js",
   "module": "dist/bundle.es.js",

diff --git a/src/components/molecules/ProfileCard.tsx b/src/components/molecules/ProfileCard.tsx
@@ -1,4 +1,3 @@
-// src/components/molecules/ProfileCard.tsx
 import { useMemo, memo } from "react";
 import { styled } from "@pigment-css/react";
 
@@ -79,6 +78,7 @@ export type ProfileCardProps = {
   isFollowing?: boolean;
   isOwnProfile?: boolean;
   onCast?: () => void;
+  customStyles?: React.CSSProperties;
 };
 
 export const ProfileCard = memo(
@@ -94,6 +94,7 @@ export const ProfileCard = memo(
     isFollowing,
     isOwnProfile,
     onCast,
+    customStyles,
   }: ProfileCardProps) => {
     const linkifiedBio = useLinkifyBio(bio);
 
@@ -111,15 +112,19 @@ export const ProfileCard = memo(
       window.open("https://warpcast.com/~/settings", "_blank");
     };
 
+    const customNumberStyle = {
+      color: customStyles?.color,
+    };
+
     return (
-      <StyledProfileCard>
+      <StyledProfileCard style={customStyles}>
         {isOwnProfile && onCast && (
           <HBox
             alignItems="center"
             justifyContent="space-between"
             spacingBottom="20px"
           >
-            <UsernameTitle>@{username}</UsernameTitle>
+            <UsernameTitle style={customStyles}>@{username}</UsernameTitle>
             <ButtonPrimary onClick={onCast}>Cast</ButtonPrimary>
           </HBox>
         )}
@@ -143,34 +148,34 @@ export const ProfileCard = memo(
                   )}
                 </HBox>
                 <HBox alignItems="center">
-                  <Username>@{username}</Username>
-                  {isFollowing && <Tag>Follows you</Tag>}
+                  <Username style={customStyles}>@{username}</Username>
+                  {isFollowing && <Tag style={customStyles}>Follows you</Tag>}
                 </HBox>
               </VBox>
               <HBox>
                 {isOwnProfile && (
-                  <ButtonOutlined onClick={handleEditProfile}>
+                  <ButtonOutlined style={customStyles} onClick={handleEditProfile}>
                     Edit Profile
                   </ButtonOutlined>
                 )}
               </HBox>
             </HBox>
 
             <Box spacingVertical="15px">
-              <div>{linkifiedBio}</div>
+              <div style={customStyles}>{linkifiedBio}</div>
             </Box>
 
             <HBox>
               <ProfileMetaCell>
-                <strong>{formattedFollowingCount}</strong> Following
+                <strong style={customNumberStyle}>{formattedFollowingCount}</strong> Following
               </ProfileMetaCell>
               <ProfileMetaCell>
-                <strong>{formattedFollowersCount}</strong> Followers
+                <strong style={customNumberStyle}>{formattedFollowersCount}</strong> Followers
               </ProfileMetaCell>
             </HBox>
           </Main>
         </HBox>
       </StyledProfileCard>
     );
   }
-);
+);
diff --git a/src/components/organisms/NeynarProfileCard/index.tsx b/src/components/organisms/NeynarProfileCard/index.tsx
@@ -32,11 +32,13 @@ async function fetchUserByFid({
 export type NeynarProfileCardProps = {
   fid: number;
   viewerFid?: number;
+  customStyles?: React.CSSProperties;
 };
 
 export const NeynarProfileCard: React.FC<NeynarProfileCardProps> = ({
   fid,
   viewerFid,
+  customStyles
 }) => {
   const { client_id } = useNeynarContext();
 
@@ -89,6 +91,7 @@ export const NeynarProfileCard: React.FC<NeynarProfileCardProps> = ({
       isOwnProfile={isOwnProfile}
       isFollowing={userData.viewer_context?.followed_by}
       onCast={handleCast}
+      customStyles={customStyles}
     />
   );
 };
diff --git a/src/components/stories/NeynarProfileCard.stories.tsx b/src/components/stories/NeynarProfileCard.stories.tsx
@@ -18,7 +18,8 @@ const Template: StoryFn<ProfileCardProps> = (args) => <ProfileCard {...args} />;
 const TemplateWithUser: StoryFn<NeynarProfileCardProps> = ({
   fid,
   viewerFid,
-}) => <NeynarProfileCard fid={fid} viewerFid={viewerFid} />;
+  customStyles,
+}) => <NeynarProfileCard fid={fid} viewerFid={viewerFid} customStyles={customStyles} />;
 
 export const Primary = Template.bind({});
 Primary.args = {
@@ -45,6 +46,13 @@ WithUser.args = {
   viewerFid: 1,
 };
 
+export const WithCustomStyling = TemplateWithUser.bind({});
+WithCustomStyling.args = {
+  fid: 1,
+  viewerFid: 1,
+  customStyles: { background: "black", color: "white" },
+};
+
 export const WithEmptyPFPUser = TemplateWithUser.bind({});
 WithEmptyPFPUser.args = {
   fid: 512026,