Skip to content

basePath configuration docs: Update README.md with #87

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
Trisky wants to merge 4 commits into from
Closed

basePath configuration docs: Update README.md with #87

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
c5bf7ef
add additional basePath attribute to allow changing the source of the…
AndiF May 23, 2025
9012984
Update README.md with basePath configuration docs.
Trisky Sep 8, 2025
2c2fd1d
Merge remote-tracking branch 'andif/AndiF-patch-1' into patch-1
Trisky Sep 8, 2025
765b48e
Syntax fix
Trisky Sep 8, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,6 +85,7 @@ import 'react-flagpack/dist/style.css'
| hasBorder | Boolean | false | true | - |
| hasBorderRadius | Boolean | false | true | - |
| gradient | String | false | '' | 'top-down', 'real-linear' or 'real-circular' |
| basePath | String | false | '' | In case you want to serve your images from a CDN or if you're serving your React application from a custom path. For example with [basePath](https://nextjs.org/docs/app/api-reference/config/next-config-js/basePath) |

## Migrating to 2.0.0
To migrate to react-flagpack 2.0.0 you will need to make some minor changes to your code base. First you will need to add react-flagpack to your post-install hook see [installation](#installation), then run yarn install (ensuring you are on at minimal react-flagpack 2.0.2).
Expand Down
26 changes: 16 additions & 10 deletions src/Flag.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,14 @@ import { Flags } from 'flagpack-core'
import './Flag.scss'

export interface FlagProps {
code: Flags;
size?: string;
gradient?: '' | 'top-down' | 'real-circular' | 'real-linear';
hasBorder?: boolean;
hasDropShadow?: boolean;
hasBorderRadius?: boolean;
className?: string;
code: Flags
size?: string
gradient?: '' | 'top-down' | 'real-circular' | 'real-linear'
hasBorder?: boolean
hasDropShadow?: boolean
hasBorderRadius?: boolean
className?: string
basePath?: string
}

const Flag: React.FC<FlagProps> = ({
Expand All @@ -20,14 +21,19 @@ const Flag: React.FC<FlagProps> = ({
hasBorder = true,
hasDropShadow = false,
hasBorderRadius = true,
className
className,
basePath = ''
}: FlagProps) => {
return (
<div
className={`flag ${gradient} size-${size} ${hasBorder ? 'border' : ''} ${hasDropShadow ? 'drop-shadow' : ''} ${hasBorderRadius ? 'border-radius' : ''} ${className ? className.replace(/\s\s+/g, ' ').trim() : ''}`}
className={`flag ${gradient} size-${size} ${hasBorder ? 'border' : ''} ${
hasDropShadow ? 'drop-shadow' : ''
} ${hasBorderRadius ? 'border-radius' : ''} ${
className ? className.replace(/\s\s+/g, ' ').trim() : ''
}`}
>
{/* Depend on the build configs to make the assets available at this location */}
<img src={`/flags/${size}/${code}.svg`} />
<img src={`${basePath}/flags/${size}/${code}.svg`} />
</div>
)
}
Expand Down