react-flagpack

Flagpack contains 250+ flag icons to easily use within your code project.

MIT License

Downloads
32.8K
Stars
129
Committers
6

Bot releases are visible (Hide)

react-flagpack - V2.0.5 Latest Release

Published by zoeyfrisart 2 months ago

Adds missing CLI depedency

react-flagpack - v2.0.3

Published by zoeyfrisart 3 months ago

This version includes a minor fix regarding the install script.
It also marks some dependencies as dependencies so that the post-install script runs properly.

Full Changelog: https://github.com/Yummygum/react-flagpack/compare/v2.0.2...v2.0.3

react-flagpack - v2.0.2

Published by zoeyfrisart 3 months ago

Duplicate of V2.0.0 with package-lock changes (this is the version published to npm)

What's new

This version reworks how React-flagpack works to work with public assets instead of inject flags through javascript.
This should ensure that React-flatpack works properly with any React library/framework as long as it supports rendering images.

This version has some breaking changes which require changes to your setup/cli, follow the migrating to 2.0.0 guide to get started.

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, then run yarn install (ensuring you are on at minimal react-flagpack 2.0.0).

After install you should see a flags folder in the public (or static) folder of your project.

Since react-flagpack styles are no longer injected in the Flag by default.
This change was made for two reasons:

  • Server side support (the injecting relied on document)
  • Not all users require the default styling so this caused unnecessary addition to bundle size

The new way of loading the CSS is by importing the default styles. You can do this in one of two ways.

// Component.tsx - In a component where flagpack is used
import 'react-flagpack/dist/style.css'

Or

/* Global.css - Importing it in the global css file */
@import 'react-flagpack/dist/style.css';
react-flagpack - v2.0.0

Published by zoeyfrisart 3 months ago

What's new

This version reworks how React-flagpack works to work with public assets instead of inject flags through javascript.
This should ensure that React-flatpack works properly with any React library/framework as long as it supports rendering images.

This version has some breaking changes which require changes to your setup/cli, follow the migrating to 2.0.0 guide to get started.

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, then run yarn install (ensuring you are on at minimal react-flagpack 2.0.0).

After install you should see a flags folder in the public (or static) folder of your project.

Since react-flagpack styles are no longer injected in the Flag by default.
This change was made for two reasons:

  • Server side support (the injecting relied on document)
  • Not all users require the default styling so this caused unnecessary addition to bundle size

The new way of loading the CSS is by importing the default styles. You can do this in one of two ways.

// Component.tsx - In a component where flagpack is used
import 'react-flagpack/dist/style.css'

Or

/* Global.css - Importing it in the global css file */
@import 'react-flagpack/dist/style.css';
react-flagpack - v1.2.0

Published by donovanroubos about 3 years ago

Previous broken version

As was stated in #40, our current approach is broken. We've done some thinking on this in this flagpack-core discussion, but unfortunately our solution of using flagpack-core as a dependancy to dynamically import SVG's has been proven rather troublesome.

New approach

I've suggested a new approach, that somewhat rewires the structure of our development implementations of the flagpack framework packages. Instead of using flagpack-core as a dependancy, I've chosen to build react-flagpack with the use of flagpack-core. This means flagpack-core now is a dev dependancy on required on build. There are some optimizations to be made here in the future, but for a proof of concept this should be a more robust solution.

This current approach still features dynamic imports and therefore accomplishes our goal regarding 'tree-shaking'. While the react-flagpack may be larger in size, through the use of dynamic imports this should not increase the size of any application using react-flagpack.

Changes

  • Add generate-flags node script that builds the flags based on flagpack-core
  • Add flag directory with flags for all sizes and values to react-flagpack
  • Moved flagpack-core to a dev dependancy as it's now only needed on build.
react-flagpack - v1.1.0

Published by donovanroubos about 3 years ago

First implementation of react-flagpack based on the major change for flagpack-core 2.0.0, which will make the package treeshakable. This will update react-flagpack to version 1.1.0 🎉

Changes

  • react-flagpack now uses a dynamic import. This results in only using the files needed within your project.
  • More information on the treeshaking implementation can be on the PR on flagpack-core and in the discussion.
react-flagpack - v0.1.1

Published by donovanroubos almost 4 years ago

Fixes

  • Updated flagpack-core package to v1.0.0 which fixes HM size m svg
  • Fix resolving url for newer React versions (^17.0.0)
react-flagpack -

Published by zoeyfrisart about 5 years ago

Updated flagpack-core to V0.0.34.

Package Rankings
Top 7.24% on Npmjs.org