frontity
also exports functions, objects, etc. to be imported and used by other Frontity packages.Slot
component whenever you want to add a 'placeholder' to your theme which will be filled with a Fill
. Fills are added to the state in the state.fills
namespace.styled
creates new React components from HTML tags, or other React components, with styles attached to them. css
lets you to add inline styles to an element if you don't want to create a new component. If you want to add styles for the whole app, use Global
. And keyframes
is used to define and use animations in your CSS.loadable
in order to separate you code into different bundles that will be dynamically loaded at runtime. This helps you to reduce your page size.fetch
and URL
connect
state
, actions
and libraries
, allowing the component to read the state, manipulate it through actions or use any code other packages have exposed in libraries.state
which the component is using is changed.injectProps
option set to false
. Components will still be reactive to changes in the state but without receiving more props.Component
options
options
injectProps
false
, the state
, actions
and libraries
won't be passed as props to the component. Default is true
useConnect
state
, actions
and libraries
in components without passing them as props.connect
:state
, actions
and libraries
){ injectProps: false }
with connect
useConnect
in this way:actions
and libraries
to <input>
as well, because they are injected by connect
.{ injectProps: false }
to connect
const { state, actions, libraries } = useConnect();
styled
styled
is a function that receives an HTML tag or a React component as the argument and returns a function that can be used as a tagged template literal. Inside, you write the CSS code for your component.styled
tag function returns a styled component with the CSS you wrote.styled
has built-in tag functions for every HTML tag so in those cases it is not necessary to call styled
directly.css
styled
except that css
doesn't return a React Component but a special object that can be passed to a component through the css
prop.css
prop or to the <Global>
's styles
propGlobal
<Global>
for other than HTML tags is not recommended because Frontity is not able to optimize it. That means you can use it for tags like html
, body
, a
, img
, and so on... But avoid it for classes. Use either the CSS prop or styled-components instead.keyframes
loadable
Promise
that will contain the imported moduleoptions
options
fallback
Promise
resolvesoptions
ssr
false
, it will not be processed server-side (default to true
)Head
<head>
tag. It allows you to change the title while navigating, add meta tags, scripts, etc.children
: the HTML tags you want to appear inside <head>
useFills
Slot
components.Fill[]
slotName
parameter. The values in those objects will come from the fills defined by the user of the slot in state.fills
.priority
.Fill
slot
slot
property. Defined in state.fills.namespace.fillName.slot
.props
state.fills.namespace.fillName.props
.library
state.fills.namespace.fillName.library
.priority
state.fills.namespace.fillName.priority
.key
namespace
and the fillName
.useFills
hook with connect()
in order for that component to work.state
using frontity.state
, like this:fetch
init
URL
base
url
is a relative URL, base
is requiredurl
is a relative URLerror
& warn
frontity
package exports an error
and warn
helpers to be used by package developers when they need to either throw an error or log a warn in the console.error
error
method throws an error. In development, it adds a message that encourage users to visit the Frontity community if they need help.console.error
.warn
decode
string
Slot
<Slot />
component enables the use of a powerful pattern called Slot and Fill. This allows for any React component to be inserted into, or hooked onto, different places within the app, thereby improving extensibility.<Slot>
components in various places in a theme. Other package developers are then able to add 'fill' components which will be hooked onto the named slots.<Slot />
components at various places in the theme, e.g. above the header, below the header, before the content, etc...<Slot/>
component.name
undefined
children
undefined
data
state.source.get(state.router.link)
<Slot/>
component will set the value of this prop to state.source.get(state.router.link)
for you automatically.any other prop
Fill
components that will be inserted in place of those slots:Fill
components that will be inserted in place of those slots. In this example we're using 'index' to pass the value of index
to the Fills:state
, to a common namespace called fills
. Each fill consists of a configuration object that should be given a unique key and assigned to a namespace. To learn more about namespaces see this section of the docs.priority
attribute assigned to the Fill.object key
slot
library
libraries.fills
(see below).priority
props
<Slot>
should be exposed in libraries.fills
by Frontity packages. They can be defined anywhere you like, as long as you can import them and pass to libraries.fills
. For example:libNamespace.ComponentName
here matches the value of state.fills.namespace.nameOfTheFill.library
above. FillComponent
here is the actual component which is defined elsewhere and may be imported. The return value of this component, i.e. FillComponent
, is the content that will be inserted into HTML at the position of the